移动端是怎么做适配的？

一、 meta viewport
在head标签内部加上这段代码

该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。

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

二、 媒体查询（响应式)

格式一：

@media （）and（）{}
//满足（）里的条件，就执行大括号里css的样式

举例：

格式二并举例：

注意点：
1、link标签会下载好，但是是否生效取决于media的条件；
2、有PC端经验，就有移动端经验，只是多了一个media查询；
3、通过添加多个css样式来满足不同的屏幕宽度；

三、动态 rem 方案
1rem等于根元素html的font-size的值。
在

现在，根元素 html 的 font-size 的大小为 页面的宽度 pageWidth 。
也就是说： 现在 ，1 rem === html 的 font-size === pageWidth。

因此，就可以利用 rem 来动态的控制页面的大小。