vue基于vw实现移动端自适应

简介: vue基于vw实现移动端自适应

背景

通过配置webpack,实现px自动转成vw,实现移动端的自适应

做法

执行以下命令安装依赖:

千万注意千万注意千万注意要指定版本,否则会报错,提示依赖需要postcss8以上版本的支持

npm i postcss-import@12.0.1 postcss-url@9.0.0 cssnano@3.10.0 postcss-aspect-ratio-mini@0.0.2 postcss-cssnext@3.1.0 postcss-px-to-viewport@0.0.3 postcss-viewport-units@0.1.6 postcss-write-svg@3.0.1 -S

接着项目根目录新增.postcssrc.js文件

module.exports = {
  "plugins": {
      "postcss-import": {},
      "postcss-url": {},
      "postcss-aspect-ratio-mini": {}, 
      "postcss-write-svg": {
          utf8: false
      },
      "postcss-cssnext": {},
      "postcss-px-to-viewport": {
          viewportWidth: 750,     // (Number) The width of the viewport.
          viewportHeight: 1334,    // (Number) The height of the viewport.
          unitPrecision: 3,       // (Number) The decimal numbers to allow the REM units to grow to.
          viewportUnit: 'vw',     // (String) Expected units.
          selectorBlackList: ['.ignore', '.hairlines'],  // (Array) The selectors to ignore and leave as px.
          minPixelValue: 1,       // (Number) Set the minimum pixel value to replace.
          mediaQuery: false       // (Boolean) Allow px to be converted in media queries.
      }, 
      "postcss-viewport-units":{
      filterRule: rule => rule.selector.includes('::after') && rule.selector.includes('::before') && rule.selector.includes(':after') && rule.selector.includes(':before')
    },
      "cssnano": {
          preset: "advanced",
          autoprefixer: false,
          "postcss-zindex": false
      }
  }
}

之后修改项目文件.browserslistrc,千万注意去掉“not dead”,否则会提示Error: Loading PostCSS Plugin failed: Unknown browser query dead

.browserslistrc

> 1%
last 2 versions

最后,运行项目,当样式写px时,则会自动转为vw,自适应配置成功。

参考

https://www.jianshu.com/p/ae0623fac11e

https://blog.csdn.net/liyunkun888/article/details/91868776

https://www.jianshu.com/p/bd9cb7861b85

https://blog.csdn.net/qq_39241544/article/details/105968832

https://zhuanlan.zhihu.com/p/164422789

https://blog.csdn.net/perryliu6/article/details/80965734

目录
相关文章
|
4天前
|
缓存 监控 JavaScript
探讨优化Vue应用性能和加载速度的策略
【5月更文挑战第17天】本文探讨了优化Vue应用性能和加载速度的策略:1) 精简代码和组件拆分以减少冗余;2) 使用计算属性和侦听器、懒加载、预加载和预获取优化路由;3) 数据懒加载和防抖节流处理高频事件;4) 图片压缩和选择合适格式,使用CDN加速资源加载;5) 利用浏览器缓存和组件缓存提高效率;6) 使用Vue Devtools和性能分析工具监控及调试。通过这些方法,可提升用户在复杂应用中的体验。
15 0
|
4天前
|
JavaScript 前端开发
vue(1),小白看完都会了
vue(1),小白看完都会了
|
4天前
|
JavaScript 开发工具 git
Vue 入门系列:.env 环境变量
Vue 入门系列:.env 环境变量
10 1
|
4天前
|
JavaScript 前端开发 定位技术
Vue使用地图以及实现轨迹回放 附完整代码
Vue使用地图以及实现轨迹回放 附完整代码
Vue使用地图以及实现轨迹回放 附完整代码
|
4天前
|
JavaScript
Vue中避免滥用this去读取data中数据
Vue中避免滥用this去读取data中数据
|
4天前
|
JavaScript 数据库
ant design vue日期组件怎么清空 取消默认当天日期
ant design vue日期组件怎么清空 取消默认当天日期
|
4天前
|
JavaScript C++
vue高亮显示组件--转载
vue高亮显示组件--转载
9 0
|
5天前
|
JavaScript 前端开发 数据安全/隐私保护
揭秘Vue中v-model的内部工作机制
揭秘Vue中v-model的内部工作机制
|
4天前
|
JavaScript
vue中使用pinia及持久化
vue中使用pinia及持久化
8 0
|
4天前
|
JavaScript 前端开发 UED
Vue class和style绑定:动态美化你的组件
Vue class和style绑定:动态美化你的组件