动态REM

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端设计稿，应先自己画出其他端的草稿，让设计人员过目。

image.png
image.png image.png

---

3 举例（如果要做这个效果）

image.png

• 固定宽度
  http://js.jirengu.com/pefob/2/edit
  问题：当设备宽度不是320px,而是375px,页面会多出一块，很难看

居中，但是很丑，我们要做到的是让所有手机看起来都和在320px一个样

• 百分比布局
  http://js.jirengu.com/kapus/edit?html,css,output
  问题：高度怎么办？

高度给百分比，是不由父容器高度决定的
解决不了

• 整体缩放
  http://js.jirengu.com/reked/3/edit

====================

4 手机端方案的特点

1.  所有手机显示的界面都是一样的，只是大小不同
2.  1 rem == html font-size == viewport width

5. 使用 JS 动态调整 REM

rem由html的font-size决定，然后我们可以用js使得页面宽度等于html的font-size,间接影响rem

image.png

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

1. 你不会命令行，你非要用 Windows
2. 你不会英语（有些内容可以看中文翻译）
3. 你不会看文档（很重要的能力）