浅谈Rem 及其转换原理

浅谈Rem 及其转换原理

今天有小伙伴问了我Rem的转换原理，那我就写篇博客记录一下吧！

• rem 是 CSS3 新增的相对长度单位，是指相对于元素 html 的 font-size 计算值 的大小。

• 默认根元素的 font-size 都是 16px 的。如果想要设置 12px 的字体大小也就 是 12px/16px = 0.75rem。

• 由于 px 是相对固定单位，字号大小直接被定死，无法随着浏览器进行缩 放。

• rem 直接相对于根元素 html，避开层级关系，移动端新型浏览器对其支持较好。

• 个人用 vw + 百分比布局用的比较多，可以使用 webpack 的 postcss-loader 的一 个插件 postcss-px-to-viewport 实现对 px 到 vw 的自动转换，非常适合开发。