rem 和 em

1、rem: root em 根元素（html）的 font-size;

2、em: 当前元素的 font-size;

方案思路

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

2、1 rem === html font-size === viewport width

使用 JS 动态调整 REM

 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <script>
     var pageWidth = window.innerWidth
     document.write('<style>html{font-size:'+pageWidth+'px;}</style>')
 </script>

下载 SCSS，使用 PX2REM

• npm config set registry registry.npm.taobao.org/

• touch ~/.bashrc

• echo 'export SASS_BINARY_SITE="npm.taobao.org/mirrors/nod… >> ~/.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