如何高效利用Vue与postcss-pxtorem实现rem单位自动转换？

本文共计653个文字，预计阅读时间需要3分钟。

REM布局是根元素（HTML）中`font-size`值的单位。REM布局非常灵活，有丰富的资料详细解释了其原理。简单来说，通过JavaScript动态获取设备宽度，可以动态设置REM值，从而在不同宽度的页面中实现REM单位的使用。

rem 布局

rem是根元素(html)中的font-size值。

rem布局不多赘述，有很多详细说明rem布局原理的资料。

简单的说，通过JS获取设备宽度动态设定rem值，以实现在不同宽度的页面中使用rem作为单位的元素自适应的效果。

新建rem.js文件，于main.js中引用

// 设计稿以1920px为宽度，而我把页面宽度设计为10rem的情况下 const baseSize = 192; // 这个是设计稿中1rem的大小。