REM

CSS深入浅出之动态REM

Posted by weite122 on 2018-02-24

长度单位

  • px 像素
  • em 一个M的宽度
  • rem 根元素(html)的font-size
  • vh viewport height 视口高度
  • vw viewport width 视口宽度(兼容性不好，未来可以替代动态rem)

手机端方案的特点

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

使用 JS 动态调整 REM

1
2
3
4
5
<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>

REM 可以与其他单位同时存在

  • font-size和border不用rem，用px就行。网页字体大小默认为16px，可以在chrome设置，字体的最小字号是12px，小于它不会显示。
1
2
3
font-size: 16px;
border: 1px solid red;
width: 0.5rem;

在 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 文件里添加，即可实现 px 自动变 rem

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    @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;
    }
FEATURED TAGS
REM
FRIENDS