移动端是怎么做适配的？

1、meta viewport

手机浏览器为了适用pc端的网页会把页面,会将整个页面缩小，因此需要针对手机的页面设置viewport,将页面放在一个虚拟的窗口中，这样每个页面就不会缩的很小。

<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指代比例为100%时屏幕宽度的css像素数值
user-scalable 用户是否可以手动缩放
initial-scale 属性控制页面最初加载的缩放比例
maximum-scale 最大缩放比例
minimum-scale 最小缩放比例

2、媒体查询

使用 @media 查询，可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是需要设置设计响应式页面的时候。在你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

<style> 
@media(max-width:375px){ body{background: blue;} } 
</style>

这里的max-width:375px指手机分辨率，如果媒体满足max-width:375px，就生效这个css样式。更多例子如下：

@media (max-width: 420px){
  body{background:red;}
}
@media (min-width: 421px) and (max-width: 760px){
  body{background:yellow;}
}
@media (min-width: 800px),handheld and (orientation: landscape){
  body{background:#eee;}
}

当你在页面中过多的使用@media后，会使页面代码看起来复杂重复，这时我们也可以引用css文件来简洁代码。

<link rel="stylesheet" href="style.css" media="(max-width: 320px)">   // 当屏幕的宽度小于320px的时候，style.css生效
<link rel="stylesheet" href="style.css" media="(min-width: 320px)">   // 当屏幕的宽度大于320px的时候，style.css生效
<link rel="stylesheet" href="style.css" media="(max-width: 320px) and (min-width=800px)">   // 当屏幕的宽度在[320px - 800px]的时候，style.css生效
<link rel="stylesheet" href="style.css" media="(min-width: 800px) , handheld and (orientation: landscape)">   // 当屏幕的宽度超过800px或设备横屏的时候，style.css生效

3、动态rem

动态rem是针对移动端，手机专用的自适应方案。rem是根元素（html）的font-size的值。比如：

html {
    font-size: 16px;
}
.demo {
    font-size: 2rem; // 相当于2* 16px = 32px
}

一般情况下浏览器默认的font-size值是16px，所以基本上 1rem = 16px

但有一点要注意：
Chrome浏览器如果不调设置的话，默认的最小字号是12px。即是说在Chrome浏览器默认下，html网页是无法显示比12px还要小的字体的，如果有，均已12px显示！

移动端适配可将rem作为尺寸单位对宽度的进行缩放

所有手机显示的界面都是一样的，只是大小不同。

可利用JS动态调整REM

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
/*先设置meta告诉浏览器页面别缩放*/

 <script>
     var pageWidth = window.innerWidth     /*获取浏览器当前页面宽度*/
     document.write('<style>html{font-size:'+pageWidth+'px;}</style>')
     /*把浏览器当前页面宽度写入<html>的font-size中*/
 </script>

上面的代码相当于让 1rem == html font-size == viewport width，间接获取了视口的宽度。

设置好了rem的尺寸，就可以根据屏幕的比例来进行动态布局，如：

div{
    width:0.5rem;    /*宽度:页面宽度的1/2*/
    height:0.5rem;   /*高度:页面宽度的1/2*/
    margin:0.25rem auto;   /*上下边距:页面宽度的1/4*/
}