postcss-px-to-viewport 从入坑到放弃 （nuxt3搭建响应式官网解决方案 ）

目录

 前沿

安装

使用

校验

移动端适配

富文本处理

注意事项

重点

安装 postcss-px-to-viewport-8-plugin 

参数说明

---

 前沿

什么是 postcss-px-to-viewport 

将px单位转换为视口单位的 (vw, vh, vmin, vmax) 的 PostCSS 插件。

为什么使用 postcss-px-to-viewport 

在pc端盛行的时代 ，如果你不想去适配更多的pc端代码，可以采用它。

由于nuxt3本身已带postcss，所以无需额外安装postcss。

安装

如何在nuxt3中使用postcss-px-to-viewport插件？首先安装postcss-px-to-viewport插件

# 使用npm安装
npm install postcss-px-to-viewport --save-dev

# 使用yarn进行安装
yarn add -D postcss-px-to-viewport

安装完毕会在 package.json 代码中显示

# package.json
  "devDependencies": {
    "postcss-px-to-viewport": "^1.1.1"
  }

使用

nuxt.config 配置信息

# nuxt.config.ts
import postcssConfig from "./utils/postcssConfig";
export default defineNuxtConfig({
  // 配置 PostCSS
  postcss: postcssConfig
})

postcssConfig文件配置信息

# postcss 插件配置: postcss-px-to-viewport
export default {
  plugins: {
    "postcss-px-to-viewport": {
      // 需要转换的单位，默认为"px"
      unitToConvert: "px",

      // 设计稿的视口宽度
      viewportWidth: 1920,

      // 单位转换后保留的精度
      unitPrecision: 5,

      // 能转化为vw的属性列表
      propList: ["*"],

      // 希望使用的视口单位
      viewportUnit: "vw",

      // 字体使用的视口单位
      fontViewportUnit: "vw",

      // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
      selectorBlackList: [".ignore", ".hairlines"],

      // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
      minPixelValue: 1,

      // 媒体查询里的单位是否需要转换单位
      mediaQuery: false,

      //  是否直接更换属性值，而不添加备用属性
      replace: true,

      // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
      exclude: [/node_modules/, /dist/, /.output/, /.nuxt/, /.vscode/],

      // 如果设置了include，那将只有匹配到的文件才会被转换
      include: [/pages/, /assets\/styles\/*/],

      // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
      landscape: false,

      // 横屏时使用的单位
      landscapeUnit: "vw",

      // 横屏时使用的视口宽度
      landscapeWidth: 1338
    }
  }
};

校验

这个脚本可以将你CSS中的px单位转化为vw，1vw等于1/100视口宽度。

先来看看这段代码在浏览器被编译后的效果

# 源scss代码段
.item {
  position: relative;
  margin: 15px 0.6%;
  padding: 12px;
  width: 23.6%;
  height: 300px;
  border-radius: 10px;
  background-color: #ffffff;
  overflow: hidden;
  transition: all 200ms linear;
}

# 在浏览器开发者模式打开查看
.content-container .content-list .news-list .item[data-v-52cd24e9] {
    position: relative;
    margin: 0.78125vw 0.6%;
    padding: 0.625vw;
    width: 23.6%;
    height: 15.625vw;
    border-radius: 0.52083vw;
    background-color: #ffffff;
    overflow: hidden;
    -webkit-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    transition: all 200ms linear;
}

以 margin 为例，可以计算得出 margin-top & margin-bottom 为 15px 的值经过编译后计算得出  15 / 1920 = 0.0078125‬ ，验证后正好是设定的viewportWidth：1920视口的1/100。

1、%单位未被编译，因为我们并未设定%纳入转换的单位范围。

2、如果你不想line-height： ?? px;被纳入编译范畴，建议采用倍率，如line-height： 1.42，当然border-radius可以采用%实现；

3、如果你是使用媒体分辨查询器，记得在其他媒体下要设定好width、height、border-radius（px)、line-height、margin、padding、font-size关键属性。

4、如果你不需要把字体大小纳入编译范畴，可以配置成这样： propList: ['*', '!font*'] ，将不转换font-size以及font-weight等属性。

移动端适配

说了这么久，怎么没看到移动端相关配置呢？马上就来：

只要你在postcssConfig.ts配置项，给 mediaQuery设置为 false，就行了。

结合我上面提到的第3点联合去实现移动端响应。

因为使用这个插件相当于使用了两套代码，所以我提出第3点就是能够尽量去继承pc端属性，而不是继承被编译的属性值。

有时候，我们会为复杂的导航栏去做两套代码。那么这时候如果你不加以阻止，那么移动端的代码会被 postcss-px-to-viewport 污染。这里我有两种方式实现：

1、通过配体查询适配包裹它

# $mobileMaxWidth 是我设置的scss变量，值=768
@media screen and (max-width: $mobileMaxWidth) {
// 移动端导航栏
 ...
}

2、通过postcssConfig.ts配置项 ， 忽略某些文件夹下的文件或特定文件

exclude (Array or Regexp) 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件

• 如果值是一个正则表达式，那么匹配这个正则的文件会被忽略
• 如果传入的值是一个数组，那么数组里的值必须为正则

# 忽略移动端导航栏样式表
exclude: [/\/assets\/styles\/page\/webapp/],

当然，除了可以忽略文件的编译，也可以 做到匹配文件 需要的编译。

⚠️exclude和include是可以一起设置的，将取两者规则的交集。

同时，也可以设置需要编译时，所需要忽略的样式。

⚠️这里有两种模式，作用类似注释，但是这里 /* px-to-viewport-ignore-next */ 不会像多行注释这么优雅，他只对下一行不转义。

# You can use special comments for ignore conversion of single lines:

/* px-to-viewport-ignore-next */ — on a separate line, prevents conversion on the next line.
/* px-to-viewport-ignore */ — after the property on the right, prevents conversion on the same line.

 读到这里或许你已经在实操了，就会发现这个bug。如果你的版本是："postcss-px-to-viewport": "^1.1.1"。

你需要到官网，找到index.js文件

拷贝index.js内容到你的依赖：\node_modules\postcss-px-to-viewport\index.js 文件并替换它。

具体请阅读：/* px-to-viewport-ignore-next */ 注释无效是为什么 · Issue #72 · evrone/postcss-px-to-viewport (github.com)

⚠️替换之后，记得重新npm run dev。（注意事项）

富文本处理

这里，或许会发现其他都不错，但是通过后台上传的富文本style他会受到污染吗？

不会的，postcss-px-to-viewport 并不会对style做编译，所以富文本时常通过style渲染的样式可以放心。

当然，也有使用默认字体大小的，这样就会受样式表的父类设定的font-size影响，你只要给父类设定字体大小就可以了，移动端同理给@media 设定字体大小。

注意事项

1. 每次修改postcssConfig.ts配置项的时候需要重新启动项目，因为你触碰了nuxt.config.ts配置。
2. 如果你刚开始并没有采用postcss-px-to-viewport去实现响应式布局的方案，你后续只要检查移动端适配就行啦，pc端交给它处理。

---

如果以上能够满足你的业务需求，就无需往下看了。

重点

这是控制台输出的警告日志： 

WARN  postcss-px-to-viewport: postcss.plugin was deprecated. Migration guide:                                           14:20:01
https://evilmartians.com/chronicles/postcss-8-plugin-migration

意思是你所使用的 postcss-px-to-viewport 已经不在维护啦~😂

真是出来旅游不看攻略，xx 🙃

现在请你毫不留情地在终端对它：npm uninstall postcss-px-to-viewport 。

经过比对，我们的nuxt3已经是postcss 8 版本的：

所以，我们为何不用 npm i postcss-px-to-viewport-8-plugin 呢🤙

安装 postcss-px-to-viewport-8-plugin 

npm i postcss-px-to-viewport-8-plugin 

幸好postcss8的插件参数与之前的postcss-px-to-viewport配置是一致的。😃

安装后，只需要修改：

# postcssConfig.ts 
# 将原先 postcss-px-to-viewport 修改成 “postcss-px-to-viewport-8-plugin”
export default {
  plugins: {
    "postcss-px-to-viewport-8-plugin": {}
  }
}

这时候你在npm run dev，终端不再有警告。并且 /* px-to-viewport-ignore-next */、 /* px-to-viewport-ignore */也不再需要上面那样操作了（修改index.js)，直接在样式表就能用。

---

参数说明

最后附上参数说明

参数	说明	类型	默认值
unitToConvert	需要转换的单位，默认为 px	string	px
viewportWidth	设计稿的视口宽度,如传入函数，函数的参数为当前处理的文件路径,函数返回 undefind 跳过转换	number | Function	320
unitPrecision	单位转换后保留的精度	number	5
propList	能转化为 vw 的属性列表	string[]	['*']
viewportUnit	希望使用的视口单位	string	vw
fontViewportUnit	字体使用的视口单位	string	vw
selectorBlackList	需要忽略的 CSS 选择器，不会转为视口单位，使用原有的 px 等单位	string[]	[]
minPixelValue	设置最小的转换数值，如果为 1 的话，只有大于 1 的值会被转换	number	1
mediaQuery	媒体查询里的单位是否需要转换单位	boolean	false
replace	是否直接更换属性值，而不添加备用属性	boolean	true
landscape	是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)	boolean	false
landscapeUnit	横屏时使用的单位	string	vw
landscapeWidth	横屏时使用的视口宽度,,如传入函数，函数的参数为当前处理的文件路径,函数返回 undefind 跳过转换	number	568
exclude	忽略某些文件夹下的文件或特定文件，例如 node_modules 下的文件，如果值是一个正则表达式，那么匹配这个正则的文件会被忽略，如果传入的值是一个数组，那么数组里的值必须为正则	Regexp	undefined
include	需要转换的文件，例如只转换 'src/mobile' 下的文件 (include: /\/src\/mobile\//)，如果值是一个正则表达式，将包含匹配的文件，否则将排除该文件， 如果传入的值是一个数组，那么数组里的值必须为正则	Regexp	undefined