移動端重置樣式
1、禁止用戶選中文字，安卓無效 webkituserselect: none?
2、禁止長按彈出系統選單， webkittouchcallout: none?
3、去除android下a/button/input標簽被點擊時產生的邊框 & 去除ios下a標簽被點擊時產生的半透明灰色背景，
webkittaphighlightcolor: rgba(0,0,0,0)?
4、切換橫豎屏或者用戶自己通過瀏覽器設定的話，可以改變字體的大小(需要給body下的所有元素)， webkittextsizeadjust: 100%?
5、按鈕在ios下都是圓角，
webkitappearance: none? 去掉瀏覽器默認樣式
borderradius: 0?
6、修改placeholder的樣式，input::webkitinputplaceholder{ color:#000? } input:focus::webkitinputplaceholder{color:#f00? }
移動端特殊處理
1、超小字體處理(設定字體時，不要小于 12px, 如果一定要小于 12px，使用 transform:sacle() 進行縮放，)
2、影片定義3D啟用硬體加速(硬體加速是指在計算機中通過把計算量非常大的作業分配給專門的硬體來處理以減輕中央處理器的作業量之技術，)
element {
webkittransform:translate3d(0,0,0) transform: translate3d(0,0,0)?
}
3、圓角bug：部分Android手機圓角失效
element{
backgroundclip: paddingbox?
}
4、Input 的placeholder會出現文本位置偏上的情況在 IOS 和 Android 中顯示不同，解決方法是：在保證
input 輸入文本垂直居中的條件下，給 input設 置
paddingtop，不要設定行高，
重置css檔案為： https://files.cnblogs.com/files/ximenchuifa/normalize.css
vscode 可安裝px2rem px自動轉rem插件 https://blog.csdn.net/weixin_45674894/article/details/102633226
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/4000.html
標籤：Html/Css
上一篇：html5—旋轉立方體
下一篇：CSS畫圖