rem和em的使用

rem 和 em 单位是由浏览器基于你的设计中的字体大小计算得到的像素值。

rem 单位基于 html 元素的字体大小。可以从浏览器字体设置中继承字体大小。
em 单位基于使用他们的元素的字体大小。可能受任何继承的父元素字体大小影响。

举个栗子

rem: 比如设置html的字体大小为20px，里面有个div.parent，包裹一个p，p的大小设置为2rem，即40px。这时如果给p的父元素div.parent设置10px的字体，对p无影响。
em: 如果p的大小设置为2em，div.parent不设大小时p为40px，div.parent设置10px大小时p为20px。

个人推荐使用rem，然后根据浏览器大小，用js或媒体查询@media改变html的font-size

实际项目中使用rem前可以设置body的font-size

// 外层字体设置
const docEl = document.documentElement
// 如果有orientationchange事件则赋值该事件，否则赋值resize事件
// orientationchange:屏幕翻转事件；resize:浏览器大小改变事件
const resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
const recalc = () => {
    const clientWidth = docEl.clientWidth
    if (!clientWidth) {
        return
    }
    if (clientWidth > 800) {
        // pc
        docEl.style.fontSize = '100px'
    } else {
        // mobile
        docEl.style.fontSize = 100 * (clientWidth / 375) + 'px'
    }
}

// 给win监听上面赋值的resizeEvt事件
window.addEventListener(resizeEvt, recalc, false)
// 给doc监听DOMContentLoaded事件
// jQ中$(document).ready() 监听的就是 DOMContentLoaded 事件，而 $(document).load()监听的是 load 事件
document.addEventListener('DOMContentLoaded', recalc, false)