手机专用的自适应方案
em是个单位，一个m的宽度
rem r表示root rem：根元素的font-size
页面的默认font-size是16px
chrome定义的最小字号像素是12px
font-size设置比12小的话，没有用
根元素html的默认样式是16px，所以这里p的1rem是16px
这里一个m的宽度就是自己的font-size的大小
做响应式需要4张设计图
PC端：flex/float定宽设计
手机端：噩梦
如何解决？
1、用百分比布局
这种的问题：高度不知道，没法让高度与宽度关联
2、整体缩放
需求
先在320px里做
那如果用户手机屏幕变了呢？比如变大了
解决：在其parent里加居中
这种在屏幕变大了的情况下，有些难看
所以我们还是需要上面需求的那样
屏幕的宽度是一个很重要的东西
怎么样让一个单位与页面宽度有关系呢？
rem：html的font-size大小如何与page-width有关系呢？
用JS
这样一个rem就等于页面宽度
在手机上用，代码里要加meta:vp
问题：基准单位太大了，都是0.几的小数
解决：我们让font-size等于页面宽度的1/100
font-size是5.几，chrome的默认设置是12px
所以这里不要设置的太小，我们让font-size是pageWidth的1/10即可
这里要注意，可以与其他单位混用（比如太小的border，用1px；或者字体不想随着屏幕缩小或放大，那么直接定死16px等）
接下来在SCSS里使用PX2REM
做这个事情的目的是，我写px，你自动帮我变成rem
1、安装sass
2、
运行
让scss文件变成css文件
这个px2rem这个函数是在scss文件里的
上面的是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 文件
