移动适配

设置视口的标签 在head里面并且应该紧接着编码设置 viewport 的功能 1、width 可以设置宽度 （device-width 当前设备的宽度） 2、height 可以设置高度 3、initial-scale 可以设置默认的缩放比例 4、user-scalable 可以设置是否允许用户自行缩放 5、maximum-scale 可以设置最大缩放比例 6、minimum-scale 可以设置最小缩放比例

在 （content=“” 中可以使用以上的参数）
1、width=device-width 宽度一致比例是1.0
2、initial-scale=1.0 宽度一致比例是1.0
3、user-scalable=no 不允许用户自行缩放 这里有两个参数（yes ，no 或者是用1 ， 0 来代替 yes 和no 都是一样的）

适配方案 （软件webstorm 想要上面适配方式快速出现 快捷方式是： meta:vp 然后按一下Tab 这个键就可以了）

**在移动端css中需要些的统一代码 **
*,
*::before,
::after{
/所有的标签，和伪元素都选中/
margin: 0;
padding: 0;
/ 防止内容溢出 出现滚动条 提升用户体验 移动端常用的是非固定像素 */
box-sizing: border-box;
-webkit-box-sizing:border-box;
/清除点击高亮效果 写两种方法是防止兼容问题/
tap-highlight-color: transparent;
-webkit-tap-highlight-color: transparent;
}
body{
font-family: “Microsoft Yi Baiti”,“sans-serif”;
font-size: 14px;
color: #333;
}
ul,ol{
list-style: none;
}
a{
text-decoration: none;
color: #333;
}
input,textarea{
border: none;
outline: none;
/这个属性值，是第二个textarea 这个属性 不允许改变尺寸/
resize: none;
/元素的外观 none 没有任何的样式 把浏览器中自带的样式清除 我们一般都是自定义的样式/
-webkit-appearance: none;

}

/清除浮动 一般网站都是需要用到浮动，我们可以提前设置好/
.f_left{
float: left;
}
.f_right{
float: right;
}
/下面是清除浮动/
.clearFix::before,
.clearFix::after{
content:none;
display: block;
visibility: hidden;
height: 0;
line-height: 0;
clear: both;

}

/*
rem方式，750px 为psd基准宽度，50px为font-size基准大小。 body设置的是默认字体大小
*/

html{font-size:50px;}
body{font-size:24px;}
@media screen and (min-width:320px){
html{font-size:21.333333333333332px;}
body{font-size:12px;}
}
@media screen and (min-width:360px){
html{font-size:24px;}
body{font-size:12px;}
}
@media screen and (min-width:375px){
html{font-size:25px;}
body{font-size:12px;}
}
@media screen and (min-width:384px){
html{font-size:25.6px;}
body{font-size:14px;}
}
@media screen and (min-width:400px){
html{font-size:26.666666666666668px;}
body{font-size:14px;}
}
@media screen and (min-width:414px){
html{font-size:27.6px;}
body{font-size:14px;}
}
@media screen and (min-width:424px){
html{font-size:28.266666666666667px;}
body{font-size:14px;}
}
@media screen and (min-width:480px){
html{font-size:32px;}
body{font-size:15.36px;}
}
@media screen and (min-width:540px){
html{font-size:36px;}
body{font-size:17.28px;}
}
@media screen and (min-width:720px){
html{font-size:48px;}
body{font-size:23.04px;}
}
@media screen and (min-width:750px){
html{font-size:50px;}
body{font-size:24px;}
}