vue3使用postcss-px-to-viewport适配屏幕

前言

本教程只使用于vue3+vue-cli5创建的项目，说白了就是使用的webpack环境，不适用于vite，后面会更新。
因为技术总是更新迭代，大多数博主都没有习惯写上自己的配置，总是把一段自认为可以的配置贴出来，很多时候看了不仅误人子弟，还耽误很多开发时间，我，致力于做一个负责人的博主，都会贴出配置和使用环境，方便大家做参考。

使用环境

名称	版本
vue	3.2.13
vue-cli	5.x
webpack	5.x
nodejs	16.15
postcss-px-to-viewport	^1.1.1

安装

npm install postcss-px-to-viewport --save-dev

yarn add postcss-px-to-viewport --save-dev

pnpm add postcss-px-to-viewport --save-dev

如果devserver正在运行，安装完成以后记得重启devserver。

配置

在项目根目录下创建 postcss.config.js 文件，并填入一下内容：

module.exports = {
  plugins: {
    // ...
    'postcss-px-to-viewport': {
      // options
      unitToConvert: "px",
      viewportWidth: 1920,
      viewportHeight:1080,
      unitPrecision: 3,
      propList: [
        "*"
      ],
      viewportUnit: "vw",
      fontViewportUnit: "vw",
      selectorBlackList: [],
      minPixelValue: 1,
      mediaQuery: false,
      replace: true,
      exclude: /(\/|\\)(node_modules)(\/|\\)/,
    }
  }
}

重新运行，打开浏览器查看属性值已经变为vw计算，就是这么简单。

附上插件的github地址： https://github.com/evrone/postcss-px-to-viewport

配置说明

项目	类型	描述
unitToConvert	(String)	unit to convert, by default, it is px.
viewportWidth	(Number)	The width of the viewport.
unitPrecision	(Number)	The decimal numbers to allow the vw units to grow to.
propList	(Array)	- The properties that can change from px to vw.
		-Values need to be exact matches.
		Use * at the start or end of a word. (['position'] will match background-position-y)
		Use ! to not match a property. Example: ['*', '!letter-spacing']
		Combine the "not" prefix with the other prefixes. Example: ['', '!font']
viewportUnit	(String)	Expected units.
fontViewportUnit	(String)	Expected units for font.
selectorBlackList	(Array)The selectors to ignore and leave as px.	If value is string, it checks to see if selector contains the string. ['body'] will match .body-class
		If value is regexp, it checks to see if the selector matches the regexp. [/^body$/] will match body but not .body
minPixelValue	(Number)	Set the minimum pixel value to replace.
mediaQuery	(Boolean)	replaces rules containing vw instead of adding fallbacks
exclude	(Regexp or Array of Regexp Ignore some files like 'node_modules')	If value is regexp, will ignore the matches files.
		If value is array, the elements of the array are regexp.
include	(Regexp or Array of Regexp) If include is set, only matching files will be converted, for example, only files under src/mobile/ (include: /\/src\/mobile\//)	If value is array, the elements of the array are regexp.
		If value is regexp, will ignore the matches files.
landscape	(Boolean)	Adds @media (orientation: landscape) with values converted via landscapeWidth.
landscapeUnit	(String)	Expected unit for landscape option
landscapeWidth	(Number)	Viewport width for landscape orientation.

结语

以上就是本次分享的全部内容了，致力于做一个有态度的前端！您的支持就是我的动力，请多多点赞！收藏！留言！