移动端到底是怎么做适配的？

根据实际的需求，我们的产品需要同时适配移动端和PC端
为了满足这个需求，我们可以按照以下思路来实现：
1.动态REM方法：rem指的是根元素的font-size,我们可以将html宽度设置为屏幕宽度，将px转换成rem来进行调配，适应不同屏幕宽度设备的显示

<script> /*通过js将html宽度设置为屏幕宽度*/
     var pageWidth = window.innerWidth
     document.write('<style>html{font-size:'+pageWidth+'px;}</style>')
 </script>

在 scss 文件里添加，这个方法可实现 px 自动变 rem

@function px( $px ){
  @return $px/$designWidth*10 + rem;
}

$designWidth : 750;  为设计稿的宽度

.child{
  width: px(375);
  height: px(160);
  margin: px(40) px(40);
  border: 1px solid red;
  float: left;
  font-size: 1.2em;
}

2.meta query方法：可以通过写媒体查询条件，只有满足了媒体查询条件，才实现内容里的css

 /*如果宽度小于 300 像素则修改背景颜色*/
@media screen and (max-width: 300px)
 {
    body {
        background-color:lightblue;
    }
}

3.meta viewport:因为浏览器初始会将页面现在手机端显示时进行缩放，因此我们可以在meta标签中设置meta viewport属性，告诉浏览器不将页面进行缩放，页面宽度=用户设备屏幕宽度

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 
/* width：控制 viewport 的大小，可以指定的一个值，device-width指的是用户屏幕宽度；
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例；
maximum-scale：允许用户缩放到的最大比例；
minimum-scale：允许用户缩放到的最小比例；
user-scalable：用户是否可以手动缩放 */