移動端重置樣式 特殊處理

 

移動端重置樣式

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

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

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

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

四、切換橫豎屏或者用戶本身經過瀏覽器設置的話，能夠改變字體的大小(須要給body下的全部元素)。 ­ webkit­text­size­adjust: 100%;

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

­webkit­appearance: none; 去掉瀏覽器默認樣式

border­radius: 0;

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

 

移動端特殊處理

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

 

二、動畫定義3D啓用硬件加速(硬件加速是指在計算機中經過把計算量很是大的工做分配給專門的硬件來處理以減輕中央處理器的工做量之技術。)

element {

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

}

 

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

element{

background­clip: padding­box;

}

 

四、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