动态REM（手机专用）

作者: desperadokk | 来源:发表于2019-02-21 21:21 被阅读0次

动态REM（手机专用）
动态rem(手机移动端专用)
CSS深入浅出-动态REM(手机专用)
动态REM
Rem 手机专用！！
动态 REM——手机专用自适应方案
动态REM（移动端适配）
2018-04-03 动态REM
CSS新手向的知识点<五>
手机动态REM封装

图片

什么是 REM
这个单位代表根元素的 font-size 大小（例如 <html> 元素的font-size）。当用在根元素的font-size上面时，它代表了它的初始值
什么是EM
相对长度单位，这个单位表示元素自身的font-size的计算值。如果用在font-size 属性本身，它会继承父元素的font-size。
页面上默认的字体大小font-size是16px，chrome默认的最小字体大小是12px。
动态REM布局

如果把html的font-size设为屏幕宽度的1/100会出bug，因为chrome默认允许的最小font-size为12px，而此时html的font-size可能会小于12px
所以可以把html的font-size设为屏幕宽度的1/10

总结

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

使用 JS 动态调整 REM
http://js.jirengu.com/xoqadocuqu/2/edit?html,css,output

 <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: 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 文件里添加
```
@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