vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3使用postcss-px-to-viewport适配屏幕

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

作者:王天平·Jason Wong

这篇文章主要介绍了vue3如何使用postcss-px-to-viewport适配屏幕问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

本教程只使用于vue3+vue-cli5创建的项目,说白了就是使用的webpack环境,不适用于vite,后面会更新。

因为技术总是更新迭代,大多数博主都没有习惯写上自己的配置,总是把一段自认为可以的配置贴出来,很多时候看了不仅误人子弟,还耽误很多开发时间,我,致力于做一个负责人的博主,都会贴出配置和使用环境,方便大家做参考。

使用环境

名称版本
vue3.2.13
vue-cli5.x
webpack5.x
nodejs16.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.

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文