手机专用的自适应方案
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 文件
网友评论