【前端-VUE3】vite+postcss-px-to-viewport框架搭建

第一次练练手写掘金，轻拍~ 轻踩~

一般移动端H5都会使用rem或者vm进行尺寸转换，以适应不同屏幕的尺寸

按照以往的安装方法，直接

yarn add -D postcss-px-to-viewport

但是vscode编辑器会有提示postcss-px-to-viewport: postcss.plugin was deprecated. Migration guide: evilmartians.com/chronicles/…

中文翻译：postcss插件已弃用。迁移指南是上面的网址啦~

**后面找到一个神奇的插件postcss-px-to-viewport-8-plugin，用法和上面的一样 **

//卸载上面的
yarn remove postcss-px-to-viewport

//安装postcss-px-to-viewport-8-plugin
yarn add -D postcss-px-to-viewport-8-plugin

//postcss.config.js
module.exports = {
    plugins: { 
        'postcss-px-to-viewport-8-plugin': {
            unitToConvert: 'px',     // 需要转换的单位，默认为"px" 
            viewportWidth: 750,      // 设计稿的视口宽度
        }
    }
}

然后重启项目，就发现页面已经变成vm尺寸啦~

强迫症患者不喜欢看到vscode里面太多信息的可以喵喵~