脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue3使用postcss-px-to-viewport适配屏幕

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

 更新时间：2023年03月29日 09:39:06   作者：王天平·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.

总结

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

您可能感兴趣的文章:

相关文章

  • Vue如何为GET或POST请求设置请求头

    Vue如何为GET或POST请求设置请求头

    这篇文章主要介绍了Vue如何为GET或POST请求设置请求头，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • 关于vue-cli3+webpack热更新失效及解决

    关于vue-cli3+webpack热更新失效及解决

    这篇文章主要介绍了关于vue-cli3+webpack热更新失效及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • Vue中如何获取json文件中的数据

    Vue中如何获取json文件中的数据

    访问百度音乐API需要传递音乐类型参数，而这些参数是存在musictype.json中，现在在组件listcate.vue需要获取json数据，如何实现呢，下面小编给大家带来了Vue中如何获取json文件中的数据，感兴趣的朋友一起看看吧
    2022-09-09
  • vue生命周期beforeDestroy和destroyed调用方式

    vue生命周期beforeDestroy和destroyed调用方式

    这篇文章主要介绍了vue生命周期beforeDestroy和destroyed调用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-06-06
  • vue路由拦截的三种方法小结

    vue路由拦截的三种方法小结

    本文给大家介绍了vue路由拦截的三种方法,全局前置守卫,路由独享守卫和全局后置钩子这三种方法,并通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-02-02
  • 基于Vue实现消息提示功能

    基于Vue实现消息提示功能

    这篇文章主要为大家详细介绍了如何基于Vue实现简单的消息提示功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-10-10
  • 详解用vue-cli来搭建vue项目和webpack

    详解用vue-cli来搭建vue项目和webpack

    本篇文章主要介绍了详解用vue-cli来搭建vue项目和webpack，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • Vue中使用fetch读取本地txt文件的技术实现

    Vue中使用fetch读取本地txt文件的技术实现

    在Vue.js应用开发中,有时我们需要从本地读取文本文件（如 .txt 文件）并将其内容展示在页面上,这种需求在处理配置文件、日志文件或静态数据时非常常见,本文将详细介绍如何在Vue中使用 fetch API 读取本地 .txt 文件,并提供多个示例和使用技巧
    2024-10-10
  • 详解Vue基于 Nuxt.js 实现服务端渲染（SSR）

    详解Vue基于 Nuxt.js 实现服务端渲染（SSR）

    直接使用 Vue 构建前端单页面应用，页面源码时只有简单的几行 html，这并不利于网站的 SEO，这时候就需要服务端渲染，本篇文章主要介绍了详解Vue基于 Nuxt.js 实现服务端渲染（SSR），具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-04-04
  • vue中关于@media媒体查询的使用

    vue中关于@media媒体查询的使用

    这篇文章主要介绍了vue中关于@media媒体查询的使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08

最新评论