移動端重置樣式 特殊處理

移動端重置樣式

1、禁止用戶選中文字，安卓無效 ­webkit­user­select: none;

2、禁止長按彈出系統菜單。 ­webkit­touch­callout: none;

3、去除android下a/button/input標簽被點擊時產生的邊框 & 去除ios下a標簽被點擊時產生的半透明灰色背景。

­webkit­tap­highlight­color: rgba(0,0,0,0);

4、切換橫豎屏或者用戶自己通過瀏覽器設置的話，可以改變字體的大小(需要給body下的所有元素)。 ­ webkit­text­size­adjust: 100%;

5、按鈕在ios下都是圓角。

­webkit­appearance: none; 去掉瀏覽器預設樣式

border­radius: 0;

6、修改placeholder的樣式。input::­webkit­input­placeholder{ color:#000; } input:focus::­webkit­input­placeholder{color:#f00; }

移動端特殊處理

1、超小字體處理(設置字體時，不要小於 12px, 如果一定要小於 12px，使用 transform:sacle() 進行縮放。)

2、動畫定義3D啟用硬體加速(硬體加速是指在電腦中通過把計算量非常大的工作分配給專門的硬體來處理以減輕中央處理器的工作量之技術。)

element {

­webkit­transform:translate3d(0,0,0) transform: translate3d(0,0,0);

}

3、圓角bug：部分Android手機圓角失效

element{

background­clip: padding­box;

}

4、Input 的placeholder會出現文本位置偏上的情況在 IOS 和 Android 中顯示不同。解決方法是：在保證

input 輸入文本垂直居中的條件下，給 input設 置

padding­top，不要設置行高。

 重置css文件為：   https://files.cnblogs.com/files/ximenchuifa/normalize.css

vscode 可安裝px2rem px自動轉rem插件 https://blog.csdn.net/weixin_45674894/article/details/102633226