vue中使用vw适配移动端

最新推荐文章于 2024-10-11 17:03:47 发布

weixin_30664539

最新推荐文章于 2024-10-11 17:03:47 发布

阅读量87

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Free-Thinker/p/10750611.html

本文详细介绍了如何在Vue项目中使用vw单位实现移动端页面的适配，包括安装必要的依赖、配置.postcssrc.js文件、添加全局CSS以及解决vw兼容性问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

推荐看看大漠老师的文章,非常的有收获
如何在Vue项目中使用vw实现移动端适配

1.首先在项目中安装依赖

npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano --S

2.修改.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, // 容器宽度，也可以看作设计图的宽度 viewportHeight: 1334, // 容器高度，可以不配置 unitPrecision: 3, // px转换为vw后保留的小数位 viewportUnit: 'vw', // px需要转换成的单位，使用vw selectorBlackList: ['.ignore', '.hairlines'], // 不需要转换为其他单位的的class类 minPixelValue: 1, // 小于等于1px不转换 mediaQuery: false // 是否允许在媒体查询中使用px }, "postcss-viewport-units": {}, "cssnano": { preset: "advanced", autoprefixer: false, "postcss-zindex": false } } }

因为在cssnano中配置了 preset:"advanced",所以需要添加一个依赖

npm i cssnano-preset-advanced --save-dev

3.添加全局css

因为postcss-viewport-units会在计算vw时自动添加content内容,但是content会有一定的副作用,所以添加一个全局的css

img {
    content: normal !important;
}

4.解决vw兼容问题

在html中引用viewport-units-buggyfill插件

<script src="//g.alicdn.com/fdilab/lib3rd/viewport-units-buggyfill/0.6.2/??viewport-units-buggyfill.hacks.min.js,viewport-units-buggyfill.min.js"></script>

然后调用viewport-units-buggyfill

<script>
    window.onload = function () { window.viewportUnitsBuggyfill.init({ hacks: window.viewportUnitsBuggyfillHacks }); } </script>

转载于:https://www.cnblogs.com/Free-Thinker/p/10750611.html