rem以及scss转css

rem 是根元素(html)的font-size

一般rem会和em进行比较
两者本质上没任何关系，如果说有关系的话，那便是：rem是根元素font-size，em是自己的font-size。

在做手机页面的时候，不可能做响应式布局的，因为手机屏幕大小由几十种，不可能完全用响应式布局，这个时候就要使用到比例布局。

若是用纯比例百分比布局，则会出现宽度按照百分比，高度无法实现，无法完美还原设计稿，这时候rem就比较适合。

因为rem既可以实现宽度的比例，也可以实现高度的比例。而一切以宽度为基准就能保证完美还原设计稿。

rem使用

1rem = html font-size = 1 page width

  
  
  
  


  1rem = html font-size = 1 page width 

给HTML标签好像素px，那么在写样式的时候，只需要给需要的样式用rem表示宽高即可。
但是在使用rem的时候，需要给样式写到小数点以后，这样比较繁琐，比如给标签fon-size:0.01rem的1%大小时候，会用到小数点好几位，就需要进行转换下。

px转rem

按照设计稿设计时，根据px转成rem是比较繁琐的，所以需要计算好来使用px。
这时候需要进行换算

  @function px2rem( $px ){
    @return $px*320/$designWidth/20 + rem;
  }
  $designWidth : 750;

并且通过scss转成css（因为scss使用比较方便）

• 首先安装淘宝镜像：* npm config set registry [https://registry.npm.taobao.org/](https://registry.npm.taobao.org/ "null")
• 然后按照node-sass：cnpm i -g node-sass
• 接着就开始创建文件

  mkdir ~/Desktop/scss-demo  
  cd ~/Desktop/scss-demo
  mkdir scss
  mkdir css
  touch scss/style.scss
  touch css/style.css

• 然后开始node-sass启动热加载监听：node-sass --watch scss/style.scss css/style.css监听文件(或者node-sass -wr scss -o css 监听文件夹)
• 再然后写代码
  scss/style.scss

@function px2rem( $px ){
    @return $px/$designWidth*10 + rem;
}
$designWidth : 750; //750 是设计稿的宽度，要根据设计稿的宽度填写。


body{
    p{
        width:px2rem(10);  //10px
        height:px2rem(10);  //10px
    }   
}

css/style.css
在看css/style.css就变成了

body p {
  width: 0.13333rem;
  height: 0.13333rem; }

这样scss里的px就自动变成了css里的rem，
我们只需要根据设计稿直接填写像素，而不需要进行换算了。