什么是 REM ?
说到rem自然就会想到em，我们知道em是相对于父元素的字体大小的单位，那么rem则是相对于根元素也就是<html>元素的字体大小的单位。
CSS中常用的长度单位：
- px：即像素，最最常用
- rem：即root em，表示根元素的font-size，根元素一般指<html></html>
- em：一个“M”的宽度（但实际面试中我们回答一个汉字的宽度比较好）
- vh：即viewport heigh，100vh表示当前视口高度
- vw：即viewport width，100vw表示当前视口的宽度（兼容性太差，不建议使用）
- 网页中：一般默认字体宽度为16px。
- 在chrome浏览器中，默认最小字体大小为12px，即设置更小的字体大小也不会有任何效果。
em 和 rem 的区别
-
其实二者除了长得比较像，没有太大的联系
-
em指的是当前元素的font-size，rem指的是根元素的font-size。
举例说明：
html{
font-size:32px;
}
body{
border:1px solid red;
font-size:16px;
height:2em;
/*此时高度为32px*/
height:2rem;
/*此时高度为64px*/
}
为什么要使用动态REM技术
-
在pc端中，网页是可以大致知道要写多宽的（比如980px），而在移动端，每一款手机的屏幕分辨率都不一样，虽然宽度的大致范围都是在300px和500px之间，但细微的差别是很明显的，只要没做好适配，就很难优雅的向用户展示网站效果。
-
现在在不同分辨率的手机上展示相同的网页，要求网页的布局大体上看着要差不多，最常用的有以下两种适配方案：
1.不固定每一个元素的宽度，都用百分比来表示。但是这么写我们无法确定宽度的确切值，如果想让某个元素的高度随着宽度的缩放而缩放就实现不了啦。
2.所以我们更希望的效果是：保持每一个元素宽高比例不变，根据设备的宽度将元素整体放大或缩小，而能实现这种效果的最佳方案，就是动态REM。
动态REM的使用
-
动态REM的思路：一切单位以设备宽度为基准，就能保证完美的还原设计稿。
-
在css中我们无法获取当前设备的宽度，所以需要在JS中需要写：
var pageWidth = window.innerWidth
document.write('<style>html{font-size:'+pageWidth+'px;}</style>')
即让<html></html>的font-size = 设备宽度，即 1 rem = 1 pageWidth
然后在css中，就可以优雅的使用rem作为单位啦。
- 注意别忘了禁止移动端的自动缩放：
<meta name="viewport" content="width=device-width, user-scalable=no,
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
栗子：
body {
font-size: 16px
}
.content {
background: #ddd;
margin: 10px 0;
}
.content {
float: left;
width: 0.4rem; /* 128(div的宽度) / 320(设计稿屏幕的宽度) = 0.4rem */
height: 0.2rem; /* 0.4rem的一半 = 0.2rem = 设计稿的 64px */
margin: 0.05rem 0.05rem; /* 0.2rem 的一半为 0.1rem => 32px */
/*因为设计稿为16px，所以再 0.1rem的一半 0.05rem*/
}
然而这么写有点不对劲呀，每个长度的数值都是用好几位小数来表示，看着不太爽,或许可以让100 rem = 1 pageWidth，比如margin就可以改写成margin: 5rem 5rem; 看起来貌似舒服多了。
但是！！每个长度都要去计算，如果css多的话那么工作量就会很大，所以使用scss让px自动转化成rem。
使用scss让px自动转化成rem
安装scss(Mac用户)
// 使用淘宝镜像
$ 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
使用PX2REM
//在当前文件新建scss和css文件夹
$ mkdir scss css
//新建style.scss 文件
$ touch scss/style.scss
//重点
$ node-sass -wr scss -o css
css:
//在style.scss写入
//重点
@function px($px) {
@return $px / $designWidth * 10 + rem;
//注意这里的10是为了省小数点，对应script
}
$designWidth: 320; //设计师给你设计稿的宽度
* {
margin: 0;
padding: 0;
}
body {
font-size: 16px
}
.content {
background: #ddd;
margin: 10px 0;
}
.content {
float: left;
width: px(128); // 128 / 320 * 10 = 4rem
height: px(64);
margin: px(16);
}
.clearfix::after {
content: '';
display: block;
clear: both;
}
js:
<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/10 + 'px}</style>')
</script>
网友评论