移动端是怎么做适配的？

一、meta viewport
在head标签内部加上这段代码
该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。也许允不允许用户缩放不同的网站有不同的要求，但让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的样式
举例：
格式二并举例：<link rel=“stylesheet” href=“style.css"media=”(max-width:320px)">
注意点：1、link标签会下载好，但是是否生效取决于media的条件；2、有PC端经验，就有移动端经验，只是多了一个media查询；3、通过添加多个css样式来满足不同的屏幕宽度；
三、动态rem方案
1rem等于根元素html的font-size的值，那么可以调整根元素的font-size值来调整页面缩放后的各个元素的尺寸和定位。在script标签加入这段代码：
此处，fontSizede的值为屏幕宽的十分之一，那么在写CSS的时候可以这样写：.xxx{
width:0.4rem;
height:0.2rem;
margin:0.05rem 0.05rem;
float:left;
}
用sass将px转化为rem：@function px( $px ){
@return $px/$designWidth*10 + rem;
}
$designWidth: 320px;

那么1rem=32px
四、对动态rem进行微调
1、rem都是小数很不方便。所以让 html 的 font-size 的尺寸等于 window.innerWidth/10；2、浏览器默认可设置的最小字体大小为12px，浏览器默认可设置的最小字体大小为12px，浏览器默认可设置的最小字体大小为12px；3、在精细的地方，就直接写像素，混用px rem em比如border:1px solid red;比如页面字体的大小就直接写font-size:16px
五、其他补充
1、px em rem vh vw的区别px：表示像素
em：一个字的高度 //1em == 自己font-size的值
rem：root em // 根元素html的font-size
vh：viewport height 视口高度=100vh
vw：viewport width 视口宽度=100vw
2、body默认字体为16px，其中chrome默认可设置的最小字体大小为12px，更改body的font-size是rem是不会变的，更改的必须是html的font-size。3、百分比布局和整体缩放布局的区别百分比布局：无法让高度跟着屏幕宽度改变而进行有比例的改变，高度和宽度无法做任何的配合；整体缩放布局：一切单位以宽度为基准。