• 超级码客 超级码客
  • 首页
  • 题库
    • 数据结构与算法面试题 ( 2619 + )
    • Java工程师面试题 ( 6548 + )
    • 前端工程师面试题 ( 6918 + )
    • Python工程师面试题 ( 4195 + )
    • C++工程师面试题 ( 4458 + )
    • Android工程师面试题 ( 3217 + )
    • IOS工程师面试题 ( 2330 + )
    • PHP工程师面试题 ( 3790 + )
    • C#工程师面试题 ( 3411 + )
    • Golang工程师面试题 ( 3522 + )
    • 分布式微服务面试题(中高级) ★ ( 2847 + )
    • 运维+DevOPS工程师面试题 ( 3463 + )
    • 大数据工程师面试题 ( 3093 + )
    • 数据库工程师面试题 ( 3246 + )
    • 软件测试工程师面试题 ( 2402 + )
    • 网络通讯工程师面试题 ( 1768 + )
  • 笔试
    • 算法数据结构笔试  ( 1200 + )
    • Java 笔试题  ( 1000 + )
    • 前端笔试题  ( 800 + )
    • PHP 笔试题  ( 150 + )
    • Python 笔试题  ( 150 + )
    • C++ 笔试题  ( 1200 + )
    • C# 笔试题  ( 180 + )
    • Golang 笔试题  ( 150 + )
    • 数据库笔试题  ( 800 + )
    • 运维笔试题  ( 260 + )
    • 网络通讯笔试题  ( 900 + )
    • 分布式笔试题  ( 80 + )
    • Android 笔试题  ( 120 + )
    • IOS 笔试题  ( 120 + )
    • 大数据 笔试题  ( 160 + )
    • 软件测试笔试题  ( 100 + )
  • 宝典
  • 专栏
  • 大厂题
    • 互联网大厂面试真题资料下载 (历年真题) ( 1000 + )
    • 互联网企业模拟真题卷 (面试题)  ( 1700 + )
    • 互联网企业模拟真题卷 (笔试题)  ( 1300 + )
  • 框架
  • 模拟
  • 组卷
  • 下载
  • 码客
    • Java 编程 ( 1297 篇 )
    • PHP 编程 ( 3397 篇 )
    • Python 编程 ( 1330 篇 )
    • 前端开发 ( 9328 篇 )
    • C / C++ ( 1375 篇 )
    • C# 编程 ( 904 篇 )
    • Golang 编程 ( 1144 篇 )
    • 数据库开发 ( 4549 篇 )
    • Linux 运维 ( 2346 篇 )
    • Docker容器 ( 1489 篇 )
    • 网络安全 ( 789 篇 )
    • Git代码协同 ( 1498 篇 )
    • 更多分类
  • 资源
    • IT图谱资料下载
    • Java资料下载
    • PHP资料下载
    • Python资料下载
    • 前端技术资料下载
    • IOS资料下载
    • DevOps资料下载
    • 公有云资料下载
    • C++专区资料下载
    • 数据库资料下载
    • 大数据资料下载
    • 架构设计资料下载
    • 职业发展资料下载
    • 更多分类
  • 职场
    • 校园专区
    • IT 职场
    • 发展之路
    • 挨踢人生
    • 面试经验
    • 资格考证
  • 图书
  • 简历
  • 🎁VIP
       vue3怎么使用postcss-px-to-viewport适配屏幕
    2025-07-07 11:42:00  [ 作者:WBOY ]  阅读数:6485

        

    使用环境

    名称版本
    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计算,就是这么简单。

    vue3怎么使用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.
    .........................................................
    请您注册登录超级码客,加载全部码客文章内容...
  • IT 码客文摘
  • 查看所有
    • ▪ Vue3相对于Vue2的进步:更容易调试代码
    • ▪ Vue3与Vue2的区别:组合式 API 的引入
    • ▪ Vue3中的provide和inject函数:高效组件间数据传递
    • ▪ Vue3中的插件和配置实例分析
    • ▪ Vue3中的mount函数:将Vue3应用挂载到DOM上
    • ▪ Vue3与Vue2的区别:更强大的条件渲染能力
    • ▪ VUE3开发入门:使用组件
    • ▪ Vue3中的v-for函数详解:完美解决列表数据渲染
    热门相关面试题
    • 1. 简述在一个函数中,要求通过函数来实现一种不太复杂的功
      推荐等级: ★★★★  难度: 中级
    • 2. 请简述 Flask 中的蓝图 (Blueprint)
      推荐等级: ★★★★  难度: 初级
    • 3. 下列代码存在几个变量没有被回收 ?
      推荐等级: ★★  难度: 中级
    • 4. 简述Redhat9 所支持的安装方式有() ?
      推荐等级: ★★★★  难度: 初级
    • 5. 简述数据质量管理在数据中台中的重要性体现在哪里 ?
      推荐等级: ★★★  难度: 中级
    • 6. 请简述 MariaDB 中如何使用 GRANT 和
      推荐等级: ★★★★  难度: 初级
    • 7. 简述如何使用Sqoop进行数据的增量导入,并且保持数
      推荐等级: ★★★★  难度: 中级
    • 8. 请解释Java 虚拟机栈的作用?
      推荐等级: ★★★  难度: 中级
    • 9. 简述下列哪些元素可以作为table元素的子元素? ?
      推荐等级: ★★★★  难度: 初级
    • 10. 简述下面程序段包含4个函数,其中具有隐含this指针
      推荐等级: ★★  难度: 高难
    IT 软件大厂热门真题( 现场卷 )
  • 查看更多
    •    深圳-乐信-Java高级程序员社招面试题
          企业名称:乐信网   [ PDF 资源 ]
         搜狐畅游Java后台开发面试题大全及参考答案
          企业名称:搜狐   [ PDF 资源 ]
         科大讯飞前端面试题及参考答案( 上)
          企业名称:科大讯飞   [ PDF 资源 ]
         网易游戏校园招聘笔试题游戏插件研发岗
          企业名称:网易集团   [ PDF 资源 ]
         杭州-蚂蚁金服-Java高级( 研发面试题
          企业名称:阿里巴巴   [ PDF 资源 ]
         宁德时代前端面试题及参考答案(2025)
          企业名称:宁德时代   [ 图文版 ]
    
    ICP备案号:沪ICP备17025979号-8 上海勤革软件版权所有 @2021-2025

    关于我们   商务合作   用户协议   隐私协议   微信小程序   APP 下载   职业咨询

    超级码客(含 APP)成立于2021年是一款针对IT程序员,软件工程师,运维,数据库,测试,软件PM等IT技术工作者打造的面试题库平台,IT岗位技术线覆盖Java,PHP,Python,Android,IOS,Linux,分布式,大数据,云计算等20大各主流技术栈,超级码客提供超过53898道优质的面试题库,技术学习文档等为用户提供全面的IT方面面试辅助以及技术指导
    APP 备案号: ICP备案号:沪ICP备17025979号-10A , 版本号:4.6 开发者:上海勤革信息技术有限公司
    超级码客