2019年10月15日16:04:19
什么是rem?
rem是根元素字体的单位，比如 html{font-size:16px;} ，1rem相当于16px。
不仅仅可以给字体用，其他px单位的都可以用，比如设padding:2rem ，相当于32px。
响应式布局的准则
响应式布局的要求（摘自知乎 Z Yuhan）：
1 . 内容区块可伸缩：内容区块的在一定程度上能够自动调整，以确保填满整个页面
2 . 内容区块可自由排布：当页面尺寸变动较大时，能够减少/增加排布的列数
3 .边距适应：到页面尺寸发生更大变化时，区块的边距也应该变化
4 .图片适应：对于常见的宽度调整，图片在隐去两侧部分时，依旧保持美观可用
5 .内容能够自动隐藏/部分显示：如在电脑上显示的的大段描述文本，在手机上就只能少量显示或全部隐藏
6 .导航和菜单能自动折叠：展开还是收起，应该根据页面尺寸来判断
7 .字体比例缩放时，字体也保持缩放
rem有什么用
选择性使用rem作为单位，这样在不同尺寸的设备上，通过修改根节点的font-size大小，实现等比例缩放
假设设备宽度为600px，页面只有2个在一行的div，使用rem宽度如下设置
html{
font-size:10px;
}
#div1{
width:20rem;
float:left;
}
#div2{
width:40rem;
float:left;
}
现在换到宽度为400px的设备上，保持比例相同，只有改变font-size即可
//在js计算字体大小，x为缩小比例
400/600=x/10
x=6.6
html{
font-size:6.6px;/*实际上使用js动态改变，也可以配置媒体查询*/
}
/*以下保持不变*/
#div1{
width:20rem;
float:left;
}
#div2{
width:40rem;
float:left;
}
为什么不用百分比呢？岂不是很简单
百分比是相对于父元素计算的，使用不方便，而且rem多了个字体变化。
如何使用
1 . 给根元素设置字体大小，并在body元素校正
html{font-size:100px;}
body{font-size:14px;}
如上设置后，使用rem代替px，直接除100即可
.menu li{
display: table-cell;
padding: .1rem .3rem;/*相当于10px 30px*/
}
自动转换成rem，参见 postcss pxtorem 插件
2 . 绑定监听事件，dom加载后和尺寸变化时改变font-size
注意把代码中的 1536 修改为实际开发时页面的宽度
//改变font-size
(function(doc,win){
var docEI = doc.documentElement,
resizeEvt = 'orientationchange' in window?'orientataionchange':'resize',
recalc = function(){
var clientWidth = docEI.clientWidth;
if(!clientWidth) return;
//100是字体大小，1536是开发时浏览器窗口的宽度，等比计算
docEI.style.fontSize = 100*(clientWidth/1536)+'px';
}
if(!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document,window);
A & Q
-
为什么不设置
font-size:62.5%？因为谷歌有些版本不支持10px大小的字体
-
为什么不使用
em？同百分比一样，相对于父元素计算不方便
-
为什么不使用
viewport等比缩放？viewport的做法：
这种做法是将屏幕等比缩放，缩放过大时会失真
-
使用rem web就是响应式的了吗？
不是，rem只是等比缩放，只解决了响应式布局的准则 的部分问题 ，还需要配合媒体查询