Rem 手机专用！！

1.什么是rem?

长度单位：
px 像素
em 一个m的宽度一个汉字的宽度
rem root em 根元素的fontsize
vh viewport height 视口高度 =100vh
vw viewport width 适口宽度 = 100vw

2.12像素法则
网页默认font-size：16px;
默认字体最小 12px（chrome有效）

3.rem 和em
是根元素的fontsize 是html标签而不是body
fontsize可以继承
em和自身的fontsize相同，不是父元素或者根元素

---

手机屏幕宽度
手机难以做响应式
1.百分比布局，高度难以控制，无法和宽度配合
2.等比缩放，不好办
3.于是有了rem 来实现所有元素等比例变化

一切单位以宽度为基准就能保证完美还原设计
但是目前还没有任何单位直接能以宽度为基准
因此想到了用js控制

image.png

通过js来控制html的fontsize来展示页面的宽度，rem刚好也和根节点下的rem相对应，从而实现了用rem来 控制 整个页面的宽高

  
*{padding: 0;margin:0;
box-sizing: border-box;}

body{
  font-size:16px;
}

.child{
  width:0.4rem;
  height:0.2rem;
  margin:0.05rem 0.05rem;
  background:#ddd;
  border:1px solid #000;
  float:left;
}


.clearfix::after{
  content: '';
  display: block;
  clear: both;
}

动态rem.gif

这样就可以实现动态rem了，非常适合手机端!

---

当距离特别小，比如1像素的border，此时就可以用px，又或者字体大小，直接用px固定一下比较美观，不然字体会随着屏幕大小的变化而变化
可以混用单位

REM 可以与其他单位同时存在
 font-size: 16px;
 border: 1px solid red;
 width: 0.5rem;

---

sass的使用方法！

• 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