• 超级码客 超级码客
  • 首页
  • 题库
    • 数据结构与算法面试题 ( 2677 + )
    • Java工程师面试题 ( 7008 + )
    • 前端工程师面试题 ( 7099 + )
    • Python工程师面试题 ( 4363 + )
    • C++工程师面试题 ( 4604 + )
    • Android工程师面试题 ( 4138 + )
    • IOS工程师面试题 ( 2991 + )
    • PHP工程师面试题 ( 4411 + )
    • C#工程师面试题 ( 3832 + )
    • Golang工程师面试题 ( 3795 + )
    • 分布式微服务面试题(中高级) ★ ( 3157 + )
    • 运维工程师面试题 ( 3793 + )
    • 大数据工程师面试题 ( 3090 + )
    • 数据库工程师面试题 ( 3770 + )
    • 软件测试工程师面试题 ( 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 ]  阅读数:6498

        

    使用环境

    名称版本
    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中的v-for函数详解:完美解决列表数据渲染
    • ▪ Vue3与Vue2的区别:更强大的条件渲染能力
    • ▪ VUE3开发入门:使用组件
    热门相关面试题
    • 1. 请简述 Django 中如何进行用户注册?
      推荐等级: ★★★★  难度: 初级
    • 2. 简述描述物联网在农业领域的应用 ?
      推荐等级: ★★  难度: 中级
    • 3. 举例说明软件测试难点在哪方面?
      推荐等级: ★★★★  难度: 中级
    • 4. 说明如何通过建造者模式避免对象构造的复杂性 ?
      推荐等级: ★★★★  难度: 高难
    • 5. 简述内容中可以使用哪个元素来表示 article 标
      推荐等级: ★★★  难度: 初级
    • 6. 简述Iceberg如何优化小文件问题 ?
      推荐等级: ★★★  难度: 中级
    • 7. 简述如何实现JS两个一组翻转链表 ?
      推荐等级: ★★★★★  难度: 高难
    • 8. 简述用PHP写出一个安全的用户登录系统需要注意哪些方
      推荐等级: ★★★★  难度: 初级
    • 9. 下列哪些是Vue的特性( ) ?
      推荐等级: ★★  难度: 初级
    • 10. 简述怎样判断两个浮点数是否相等 ?
      推荐等级: ★★★★  难度: 中级
    IT 软件大厂热门真题( 现场卷 )
  • 查看更多
    •    交通银行-Java开发笔试笔记
          企业名称:交通银行   [ 图文版 ]
         达内社招常规算法部分题解(附答案)
          企业名称:达内教育   [ 图文版 ]
         联想集团科技子公司 Android 面试题
          企业名称:联想集团   [ PDF 资源 ]
         2024新版-百度大数据开发面试题集锦及参考
          企业名称:百度在线   [ PDF 资源 ]
         字节跳动-分布式系统RPC原理面试题及参考答
          企业名称:字节跳动   [ 图文版 ]
         BYD 研发中心C++编程机试题2022
          企业名称:比亚迪(BYD)   [ 图文版 ]
    
    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 开发者:上海勤革信息技术有限公司
    超级码客