3.2.4 rem
在以前也讲到，rem是相对于根元素html的font-size属性，默认情况下浏览器字体大小为16px，此时1rem = 16px
可以利用前面提到的媒体查询，正对不同设备分辨率改变font-size的值，如下：
@media screen and (max-width: 414px) {
html {font-size: 18px}
}
@media screen and (max-width: 375px) {
html {font-size: 16px}
}
@media screen and (max-width: 320px) {
html {font-size: 12px}
}
为了更准确监听设备可视窗口变化，我们可以在css之前插入script标签，内容如下：
// 动态为根元素设置字体大小
function init () {
// 获取屏幕宽度
var width = document.documentElement.clientWidth
// 设置根元素字体大小。此时为宽的10等分
document.documentElement.style.fontSize = width / 10 + 'px'
}
init() // 首次加载应用，设置一次
window.addEventListener('orientationchange', init) // 监听手机旋转的事件的时机，重新设置
window.addEventListener('resize', init) // 监听手机窗口变化，重新设置
无论设备可视窗口如何变化，始终设置rem为width的1/10，实现了百分比布局
除此之外，我们还可以利用主流UI框架，如：element ui、antd提供的栅格布局实现响应式
