移動端常見樣式問題
【點選背景】
在移動端,點選可點選元素時,android下會出現淡藍色背景,IOS下會出現灰色背景。
可以通過-webkit-tap-hightlight-color屬性的設定,取消點選時出現的背景效果。
*{
-webkit-tap-hightlight-color:rgba(0,0,0,0);
}
【appearance】
使用appearance:none主要用來去除表單類元素在瀏覽器中的內建樣式,如去除data型別input域的叉叉,去除number型別input域的上下箭頭。
-webkit-appearance:none;
【禁止選中】
通常會使用js來實現,也可以用-webkit-user-select設為none
-webkit-user-select:none;
【禁止文字縮放】
部分手機上,切換橫豎屏,會縮放字型。使用如下設定,可以禁止文字縮放
*{
-webkit-text-size-adjust:100%;
}
[文字渲染]
使用text-rendering:optimizeLegibility屬性,可以讓瀏覽器在繪製文字時將著重考慮易讀性,而不是渲染速度和幾何精度,它會使字間距和連字有效。
text-rendering:optimizeLegibility;
【文字平滑顯示】
-webkit-font-smoothing 屬性可以用來控制字型的畫素顯示是否平滑。
none 關閉抗鋸齒,字型邊緣犀利。
antialiased 字型畫素級平滑,在深色背景上會讓文字看起來更細了。
subpixel-antialiased字型亞畫素級平滑,主要為了非視網膜裝置下更好的顯示。
body{
-webkit-font-smoothing:antialiased;
}
【輪廓 outline】
input、textarea等表單類標籤,在獲取焦點的情況下,在andriod系統下,會出現淡藍色輪廓outline,使用outline:none將去除。
outline:none;
【placeholder】
placeholder 預設是淺灰色,如果input域是淺灰色背景。則這時placeholder的文字與背景顏色相近,無法清晰顯示,就需要設定placeholder的顏色。可以通過偽元素來進行設定:
::placeholder{
color:#fff;
}
【清除按鈕圓角】
input,button{
-webkit-appearance:none;
border-radius:0;
}
【滾動回彈】
-webkit-overflow-scrolling 屬性控制元素在移動裝置上是否使用滾動回彈效果。
auto使用普通滾動,當手指從觸控式螢幕上移開,滾動會立即停止。
touch使用具有回彈效果的滾動,當手指從觸控式螢幕上移開,內容會繼續保持一段時間的滾動效果。繼續滾動的速度和持續的時間和滾動手勢的強烈程度成正比。同時也會建立一個新的堆疊上下文
body{
-webkit-overflow-scrolling:touch;
}
一定要設定該屬性,否則在IOS下會出現區域性滾動不流暢的bug。
【1倍行高】
設定line-height:1,即行高為1時,有的頁面會出現文字顯示不全的情況,所以行高設定一定要大於1。