提到移动端适配，小伙伴们都会想到rem布局，那么rem是什么呢？我们有为什么要使用rem呢?下面我们就来讨论一下。
什么是rem?
rem是相对于根元素（也就是<html></html）的字体大小的单位，也就是说它的大小会随着html的变化而变化。
rem与em有什么关系？
说到rem又不免想到em。那么他们之间有什么血缘关系吗？是的，他们可能是兄弟、父子，也可能是爷孙关系。它们之间的区别在于，rem依赖于根元素<html>,而em是依赖于父元素。
为什么rem要用在移动端？
为什么要在移动端使用rem呢？pc端就不行吗？答案当然是肯定的，但由于某些浏览器（如IE浏览器）对rem的兼容性，尽量还是不要在pc端使用rem。
rem的使用场景与使用方法：
最普遍的用法莫过于根据设计图的宽度来设置：
document.querySelector('html').style.fontSize =
document.querySelector('html').clientWidth / 750* 100 + 'px';
window.onresize = function () {
document.querySelector('html').style.fontSize =
document.querySelector('html').clientWidth / 750 * 100 + 'px';
}
rem可以做到一些百分比流式布局难以完成的效果，如类似于bootstrap等主流ui框架的栅格系统。我们完全可以通过下面这段js代码模拟出栅格效果：
document.querySelector('html').style.fontSize =
document.querySelector('html').clientWidth / 12 + 'px';
window.onresize = function () {
document.querySelector('html').style.fontSize =
document.querySelector('html').clientWidth / 12 + 'px'
}
这样就把html的fontsize设置为整屏宽度的十二分之一，也就是说整屏宽度等于12rem,平常用百分比做不到的效果我们就可以轻松搞定。如：把屏幕分成3等份。
再比如下面这种情况：
我们想要img的宽高比例固定，用百分比显然是做不到的。我们能要求用户上传图片的时候把图片的比例固定吗?显然不现实。这个时候用rem来设置它的宽高就可以轻而易举的解决这个问题了。
119
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
