移动相关处理（去除高亮框、去除表单默认样式，禁止长按弹出系统菜单、进制自动调整文字大小、修改placeholder的样式、小字处理）

移动端相关处理

1.去除高亮框

去除android下a/button/input标签被点击时产生的边框 &
去除ios下a标签被点击时产生的半透明灰色背景
(默认都会在激活状态时，显示高亮框)

a,input,textarea,select{
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Wo46MFjO-1606551879660)(…/AppData/Roaming/Typora/typora-user-images/image-20201123185842898.png)]

2.去除默认表单样式

在iOS上，输入框默认有内部阴影，按钮默认有背景和圆角

-webkit-appearance: none; //button与input都会有个默认背景

input,textarea{
    -webkit-appearance: none; 
    border-radius: 0;
}

3.禁止长按弹出系统菜单

禁止用户选中文字，安卓无效

.box3{
            background-color: orange;
            -webkit-touch-callout:none;
 }

<div class="box" onselectstart="return false">

4.禁止自动调整文字大小

当移动设备横竖屏切换时，文本的大小会重新计算，进行相应的缩放，
当我们不需要这种情况时，可以选择禁止：

html,body{-webkit-text-size-adjust: 100%;}

5.修改placeholder的样式

input::placeholder{            
	color:red;
}
input::-moz-placeholder{  
color:red;
}
input::-ms-input-placeholder{
color:red;
}
input::-webkit-input-placeholder{
      color:#000;    //默认的样式
}

6.Input 的placeholder会出现文本位置偏上的情况

设置padding-top

input{padding-top:2px;}

7.小字处理

使用transform:sacle()进行缩放。不建议大篇幅使用

.box{
            font-size:12px;
            transform:scale(0.8);
}

8.动画定义3D启用硬件加速

3d函数替代普通单个定义的写法，开启硬件加速

element {
	-webkit-transform:translate3d(0,0,0)
	transform: translate3d(0,0,0);
}

3D变形会消耗更多的内存与功耗

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

}

扫描二维码关注公众号，回复： 12646257 查看本文章

3D变形会消耗更多的内存与功耗