动态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

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

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

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

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. 你不会看文档(很重要的能力)

推荐阅读更多精彩内容

  • 手机专用的自适应方案em是个单位,一个m的宽度rem r表示root rem:根元素的font-size 页面...
    tsl1127阅读 40评论 0 0
  • rem 这个单位代表根元素的 font-size 大小(例如 元素的font-size)。 rem 与 em ...
    半斋阅读 33评论 0 0
  • 响应式 什么是响应式页面呢? 顾名思义响应式页面就是能做出响应的页面,它的页面效果不是定死的,会随着用户的改变而改...
    Criya阅读 464评论 0 1
  • 动态REM是手机专用的自适应方案 REM是什么 我们常用的单位有(有问题看MDN) px em (一个汉字M的宽度...
    YM雨蒙阅读 75评论 0 0
  • 1. rem 就是页面根元素的font-size 2. 使用sass px2函数 npm config set r...
    爱跳的兔子阅读 524评论 0 0