H5移动端适配方案-动态REM

1. 什么是 REM

• 浏览器默认字体大小为16px
• REM就是 root em即基于根（html）元素字体大小的em单位
• rem和em的区别？没什么关系
  • 1em = 本身元素的font-size（可以这样理解，不过不准确）
  • 1rem = 根元素的font-size的大小

2. 动态 REM 方案

由于手机屏幕众多导致的尺寸不同的问题，我们需要一种自适应方案。
自适应方案可以用百分比布局 缺点：高度不能和宽度配合。
rem方案是以屏幕宽为基准的方案，通过js动态获取屏幕的宽度，从而和rem产生联系。

var pageWidth = window.innnerWidth
document.write('<style>html{font-size:' + pageWidth/10 + 'px;'}</style>')

这样 1rem = html的font-size = 1/10 pageWidth

注意:使用rem方案，经常犯的错误就是，js动态更改根元素html元素的font-size时，如果换算比例过小（/100），换导致html的font-size小于12px，chrom默认不能小于，这就出错了，不容易被察觉。

利用rem和其他单位混用可以达到很好的效果。

3. 在 SCSS 里使用 PX2REM，自动进行rem值换算

利用scss，我们就不用自己手算了，设计稿是多少就写多少，再将scss文件转成css文件即可。
使用步骤（windows可用，命令行工具是git bash）

• npm config set registry https://registry.npm.taobao.org/
• touch ~/.bashrc
• echo 'export SASS_BINARY_SITE="https://npm.taobao.org/mirrors/node-sass"' >> ~/.bashrc
• source ~/.bashrc
• npm i -g node-sass
• mkdir ~/Desktop/scss-demo
• cd ~/Desktop/scss-demo
• mkdir scss css
• touch scss/style.scss
• start scss/style.scss
• node-sass -wr scss -o css
• 编辑 scss 文件就会自动得到 css 文件
• 在 scss 文件里添加

@function px( $px ){
  @return $px/$designWidth*10 + rem;
}   
$designWidth : 640; // 640 是设计稿的宽度，你要根据设计稿的宽度填写。
.child{
  width: px(320);
  height: px(160);
  margin: px(40) px(40);
  border: 1px solid red;
  float: left;
  font-size: 1.2em;
}

即可实现 px 自动变 rem,不需要手动换算。