动态REM

手机专用的自适应方案

什么是 REM
REM(root em) 根元素(<html>)的font-size，1rem===16px
vh(viewport height) 100vh===视口高度
vw(viewport width) 100vw===视口宽度
网页的默认font-size是16px
12像素法则：如果chrome把最小字号设置成12px，就算把font-size设置成6px；最后CSS还是12px
REM 和 EM 的区别是什么
REM(root em) 根元素(<html>)的font-size
em 自己的font-size的px值
手机端方案的特点
每个手机分辨率不同，手机端不可能做响应式，百分比布局也不行，因为height没法和width做任何配合，因为width不确定
一切单位以宽度为基准，就能保证完美还原设计稿
1. 所有手机显示的界面都是一样的，只是大小不同
2. 1 rem == html font-size == viewport width

使用 JS 动态调整 REM

<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 可以与其他单位同时存在

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源切换成淘宝*/
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

为什么学不好 LESS/SASS/Webpack

不会命令行，非要用 Windows
不会英语（有些内容可以看中文翻译）
不会看文档（很重要的能力）

手机专用的自适应方案

为什么学不好 LESS/SASS/Webpack

Comments