动态REM是手机专用的自适应方案
REM的值
1. CSS有很多长度单位
-
px像素 -
em一个"M"的宽度(一个汉字的宽度) -
ex一个"X"的高度 -
vh(viewport height) 视口高度
100vh == 视口高度 -
vw(viewport width) 视口宽度
100vw == 视口宽度 -
rem(root em) 根元素的font-size值 - ......
没错，REM就是根元素(<html>)的font-size的值
但要讲动态REM，就得再普及几个概念。
2. Chrome12像素法则
- Chrome浏览器如果不调设置的话，默认的最小字号是12px
- 也就是说，Chrome不设置的话。html网页是无法在Chrome上显示比12px还要小的字体的，如果有，均已12px显示
3. 网页默认字体大小
- 根元素(<html>)的默认
font-size是16px
综上所述，在默认情况下，1rem = 16px
手机端方案
1. 方案抉择
-
响应式?
虽然手机端的宽度都在300~500之间，但如果用了响应式，适配各种高机型会变得非常费时费力，而且图是大问题。 -
百分比布局(自适应宽度等)
百分比布局的宽度可以解决，但是高度怎么办？而且你都不知道宽度确切的值，所以也很难把高度和宽度关联起来。 -
整体缩放
保证了在各个机型上显示的比例
我觉得可以～
2. 整体缩放(动态REM)
其实使用vw作为尺寸单位最好，但是兼容性太差
所以我们选择rem作尺寸单位
动态REM主要利用了rem = html:font-size = viewportWidth
动态REM
动态REM主要利用了rem = html:font-size = viewportWidth
1. 利用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>')
/*把浏览器当前页面宽度写入<html>的font-size中*/
</script>
接下来就可以用rem的值了
2. CSS代码(测试效果)
div{
width:0.5rem;/*宽度:页面宽度的1/2*/
height:0.5rem;/*高度:页面宽度的1/2*/
margin:0.25rem auto;/*上下边距:页面宽度的1/4*/
}
特点&解决方案
1. REM可以和其他单位同时存在
div{
font-size: 16px;
border: 1px solid red;
width: 0.5rem;
}
2. 单位转换问题
- 所有rem都是小数，看起来眼花缭乱
- 不如把pageWidth改成pageWidth/100，但其实是不行的，因为Chrome默认最小font-size是12px
- 退而求其次，改成pageWidth/10，然后再把相应宽度*10就行了
3. 使用SCSS
使用SCSS可以写个函数，方便的将设计稿里的尺寸单位px直接转换成rem相应的值
- 安装SCSS(命令行)
$ npm config set registry [https://registry.npm.taobao.org/](https://registry.npm.taobao.org/ "null")
$ touch ~/.bashrc
$ echo 'export SASS_BINARY_SITE="[https://npm.taobao.org/mirrors/node-sass"'](https://npm.taobao.org/mirrors/node-sass%22' "null") >> ~/.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
编辑 scss 文件就会自动得到 css 文件
在 scss 文件里添加
@function px/*左边是名称，可改*/( $px ){
@return $px/$designWidth*10 + rem;
/*以实际像素值➗当前页面宽度✖️rem的转换率 再加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;
}
完～累死了
网友评论