移动端适配

移动端适配有三个关键点：

• viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>

viewport指的是“视口”，即设置网页宽度等于设备宽度（device-width）。原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。禁止用户缩放（user-scalable=no）。

• 媒体查询
  主要是通过查询设备的宽度来执行不同的 css 代码，最终达到界面的配置。例如：

@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
  /*你的css代码*/
}

这是在CSS内部进行的媒体查询，也可以设置在head标签内为不同宽度的设备选择加载不同的CSS文件，以下CSS文件就只在设备宽度小于500px的时候才有效：

<link rel = "stylesheet" href = "./mobile.css" media="screen and (max-width:500px)">

• 动态rem
  rem表示根元素（HTML）的font-size大小，当指定一个元素的font-size为2rem，如果HTML的font-size是12px，那么这个元素的font-size就是24px。所以只要根据不同屏幕设定好HTML的font-size大小，那么使用rem单位的元素就会自适应显示相应的尺寸了。
  那如何使屏幕大小和HTML的font-size大小相关联呢，一是利用媒体查询给不同宽度设置相应的HTML的font-size：

@media screen and (min-width: 375px){
    html {
        font-size: 14px;   
    }
}
@media screen and (min-width: 360px){
    html {
        font-size: 13px;
    }
}

二是可以利用JS获取屏幕宽度：

const oHtml = document.getElementsByTagName('html')[0]
const width = oHtml.clientWidth;
oHtml.style.fontSize = width/10 + "px";

此时rem的单位长度就是屏幕宽度的1/10。
不过这种比较麻烦，需要手动计算px与rem，我们可以在 SCSS 里使用 PX2REM，自动进行转换：

@function pxToRem( $px ){
  @return $px/$designWidth*10 + rem;
}
$designWidth : 640; //设计稿宽度
div{
  width: px(300);
  height: px(300);
}

em和rem的区别

虽然em带来了模块化的好处，但是由于 em 是相对于父元素的倍数，所以你可能在许多层嵌套的 em 中找不到一个固定值，rem 就是可以随时拿来用的一个固定参考值。