移动端是怎么做适配的？

一、meta viewport

• 在head中写一个meta标签：
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

width=device-width: 让当前视口宽度等于设备的宽度
user-scalable=no: 禁止用户缩放
initial-scale=1.0: 设置页面的初始缩放值为1.0
maximum-scale=1.0: 允许用户的最大缩放值为1.0
minimum-scale=1.0: 允许用户的最小缩放值为1.0

二、媒体查询

• 格式：

@media (查询条件 ){
	CSS样式
}
//满足（）中的查询条件，就会应用{}中的CSS样式

• 例如：

@media(max-windth:800px){
	body{
		background: red;
	}
}
//如果某个媒体的最大宽度为800px(0-800之间)，
那么它就会应用这个样式。

@media (min-width:321px) and (max-width:375px){
    body{
        background:orange;
    }
}
//同时满足两个条件，大于等于321，小于等于375

三、动态rem

• 什么是rem?
  rem是一个length单位
• MDN中对rem的定义是：

这个单位代表根元素的 font-size 大小（例如 元素的font-size）。当用在根元素的font-size上面时 ，它代表了它的初始值。

即：
如果设置 html 的font-size为20px ，那么 1rem就等于20px。
这样的话，就可以根据根元素html的font-size值来写各元素的尺寸大小。
在script标签中写入以下代码：

<script>
	var pageWidth = window.innerWidth  //获取到页面的宽度
	document.write('<style>html{font-size:' + pageWidth + 'px}</style>')
</script>

那么，在写CSS的时候就可以根据想要的不同尺寸，以rem为单位来写宽度和高度。
例如：

.xxx{
	width:0.4rem;
	height:0.2rem;
	margin:0.05rem 0.05rem;
}

不过此时html的字体大小就太大了，只需要在body中另写一个font-szie就行了。

四、对rem进行微调

• 以上这样写过之后，宽高中的rem都是小数，既不好写又不好看，所以，让 html的 font-size 的尺寸等于window.innerWidth/10，这样就好了。
• 在需要比较精细的地方，例如1px的border,或者是body中的font-size，就直接写px，混用rem、px、em。