移动端重置样式 特殊处理

 

移动端重置样式

一、禁止用户选中文字，安卓无效 ­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