2018-04-03 动态REM

手机专用的自适应方案
em是个单位，一个m的宽度
rem r表示root rem：根元素的font-size

image.png

页面的默认font-size是16px

chrome定义的最小字号像素是12px

image.png

font-size设置比12小的话，没有用

image.png
根元素html的默认样式是16px，所以这里p的1rem是16px
image.png

这里一个m的宽度就是自己的font-size的大小

image.png

做响应式需要4张设计图

image.png

PC端：flex/float定宽设计
手机端：噩梦

image.png

如何解决？
1、用百分比布局

image.png

这种的问题：高度不知道，没法让高度与宽度关联

2、整体缩放
需求

image.png

先在320px里做

image.png
那如果用户手机屏幕变了呢？比如变大了

解决：在其parent里加居中

image.png

这种在屏幕变大了的情况下，有些难看
所以我们还是需要上面需求的那样

image.png

屏幕的宽度是一个很重要的东西
怎么样让一个单位与页面宽度有关系呢？
rem：html的font-size大小如何与page-width有关系呢？
用JS

image.png
image.png

这样一个rem就等于页面宽度

image.png
在手机上用，代码里要加meta:vp
问题：基准单位太大了，都是0.几的小数
解决：我们让font-size等于页面宽度的1/100
image.png
font-size是5.几，chrome的默认设置是12px
所以这里不要设置的太小，我们让font-size是pageWidth的1/10即可
这里要注意，可以与其他单位混用（比如太小的border，用1px；或者字体不想随着屏幕缩小或放大，那么直接定死16px等）
image.png

接下来在SCSS里使用PX2REM
做这个事情的目的是，我写px，你自动帮我变成rem
1、安装sass

image.png
2、 image.png
运行 image.png
让scss文件变成css文件
image.png

这个px2rem这个函数是在scss文件里的

image.png

上面的是sass命令，如果是node-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 文件