本文介绍了如何在Nuxt项目中使用postcss-px-to-viewport插件进行移动端适配，详细配置了nuxt.config.js，包括设置视窗宽度、高度、单位精度等关键参数，确保px到vw的转换。此外，还提到了其他适配问题的参考资源。
基于nuxt 2.0.0
一、安装postcss-px-to-viewport
npm安装
npm install postcss-px-to-viewport --save-dev
或 yarn安装
yarn add -D postcss-px-to-viewport
二、在nuxt中配置postcss-px-to-viewport
在nuxt.config.js中配置
export default {
...
...
...
/*
** Build configuration
*/
build: {
/*
** You can extend webpack config here
*/
postcss: {
// 添加插件名称作为键，参数作为值
plugins: {
"postcss-px-to-viewport": {
unitToConvert: "px", // 默认值`px`，需要转换的单位
viewportWidth: 375, // 视窗的宽度,对应设计稿宽度
viewportHeight: 667, // 视窗的高度, 根据375设备的宽度来指定，一般是667，也可不配置
unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数
propList: ["*"], // 转化为vw的属性列表
viewportUnit: "vw", //
最低0.47元/天 解锁文章
577
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
