移动端重置样式 特殊处理

 

移动端重置样式

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