-
px 固定像素 设置后无法适应页面大小而改变
-
em 灵活性 相对长队单位 长度不是定死了 使用响应式布局 (相对于父元素来设置字体大小,一般以body的font-size为基准,这样就得小心,进行任何元素设置,都有可能需要知道他父元素的大小)
-
rem 灵活性 相对长队单位 长度不是定死了 使用响应式布局 (相对于根元素html, 只需要在根元素确定一个参考值)
一句话: px定死长度,em、rem使用响应式,em相对父元素,rem相对根元素
rem 示例:
其中
const resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
这段是为了获取移动端屏幕是否翻转 (手机重力感应等引起屏幕长宽变化之类的)
mdn文档中 有详细说明 : developer.mozilla.org/zh-CN/docs/…