1. 什么是 REM?
根节点(html)的font-size(默认font-size是16px).若设置html的font-size为14px，则整个页面都可以通过设置设置rem来使得字体大小为14px
2. REM 和 EM 的区别是什么
rem:根节点的font-szie
em:本身的font-size (表示一个M的宽度)
image.png
当我们想做响应式页面，必须由设计人员给出下述几个图，不然做不了，如果只给PC端设计稿，应先自己画出其他端的草稿，让设计人员过目。
3 举例（如果要做这个效果）
- 固定宽度
http://js.jirengu.com/pefob/2/edit
问题：当设备宽度不是320px,而是375px,页面会多出一块，很难看
居中，但是很丑，我们要做到的是让所有手机看起来都和在320px一个样
- 百分比布局
http://js.jirengu.com/kapus/edit?html,css,output
问题：高度怎么办？
高度给百分比，是不由父容器高度决定的
解决不了
====================
4 手机端方案的特点
1. 所有手机显示的界面都是一样的，只是大小不同
2. 1 rem == html font-size == viewport width
5. 使用 JS 动态调整 REM
rem由html的font-size决定，然后我们可以用js使得页面宽度等于html的font-size,间接影响rem
http://js.jirengu.com/reked/2/edit
优化：使得rem尽量取整数，手机页面需要在html的head里加上meta
http://js.jirengu.com/reked/5/edit?html
<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>
6. REM 可以与其他单位同时存在
font-size: 16px;
border: 1px solid red;
width: 0.5rem;
7. 在 SCSS 里使用 PX2REM
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
8为什么你学不好 LESS/SASS/Webpack
- 你不会命令行，你非要用 Windows
- 你不会英语（有些内容可以看中文翻译）
- 你不会看文档（很重要的能力）
