移动端是怎么做适配的？
1.使用<mtea name="viewport">
<meta>标签包含 name、 content 、 http-equiv 、 charset 、 scheme 五个属性，当 name 的值为 viewport 时可以使页面适应移动端设备，常用的meta viewport标签如下： <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
其中：
width：控制viewport宽度的大小，可以指定的一个值（或特殊值），如500，或device-width //特殊值
height：控制viewport宽度的大小，同上
initial-scale：控制页面第一次加载时的缩放比例
maximum-scale：允许用户缩放的最大比例
minimum-scale：允许用户缩放的最小比例
user-scalable：用户是否可以手动缩放
2.媒体查询
@media有四种媒体类型： all （适用于所有设备）、 screen （用于屏幕）、 print（用于打印设备）、speech （用于发声设备），默认情况下使用 all 类型
图片发自简书App
上图使用all类型.当窗口小于500px时，字体变成红色.
3.使用动态 rem
rem代表根元素的 font-size 的大小，当设置元素的 font-size 为1rem时，就表示该元素的字体大小为根元素字体大小的1倍，2rem就为根元素字体大小的2倍...以此类推；同时也可以通过修改根元素的字体大小来改变元素字体的大小。
使用rem可以成比例地修改元素的字体大小，还可以避免添加的字体样式与继承来的样式相冲突。
