在移動設備上,網頁的樣式需要進行一些調整以適應不同的屏幕尺寸和觸摸操作。這就需要用到CSS對移動端進行適配。以下是一些常用的CSS代碼:
/* 禁用文字選中效果 */ * { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* 設置頁面寬度為設備寬度,并禁止縮放 *//* 設置Body元素字號為14px */ body { font-size: 14px; } /* 設置鏈接顏色 */ a { color: #00bfff; text-decoration: none; } /* 讓超出容器寬度的圖片自適應 */ img { max-width: 100%; height: auto; } /* 重置表單樣式 */ input, select, textarea, option { border: none; outline: none; appearance: none; -moz-appearance: none; -webkit-appearance: none; } /* 兼容不支持input[type='number']的瀏覽器 */ input[type='text'][data-type='number']::-webkit-outer-spin-button, input[type='text'][data-type='number']::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type='text'][data-type='number'] { -moz-appearance: textfield; }
這些樣式可以使得移動端的網頁更加美觀、易用,提高用戶的體驗。
下一篇css手機分頁樣式修改