vue如何适配移动端

做移动端相信大家刚刚开始的时候都会很反感因为他不像pc端那样这里会处理很多的兼容性但是找到方法做完适配一切都边的很简单了

1. 使用lib-flexible 之前文章里面介绍过了这里就不多介绍了

2.使用vw适配现在也是相对而言比较火的一种适配其原理是基于PostCSS插件下面就看一下到底该怎么使用吧

2.1 第一步下载脚手架这里就不啰嗦了

2.2 第二步既然是基于PossCss插件肯定接下来就要下载这个插件了但是 vue默认是已经下过的你只需要找到 .postcssrc.js就行了

2.3 第三步下载一些其他辅助插件

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

2.4 第四步进入刚刚的.postcssrc.js里面修改配置 postcss-px-to-viewport : 将项目中的px转化为vw

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
    }
  }
}

2.5 第五步添加全局css 因为postcss-viewport-units会在计算vw时自动添加content内容,但是content会有一定的副作用,所以添加一个全局的css （针对于img）

img {
    content: normal !important;
}

2.6 第六步处理兼容性在index.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>

希望对大家有多帮助有什么不明白的可以留言如果解决了就点个赞吧

沫熙瑾年

发布了109 篇原创文章 · 获赞 23 · 访问量 10万+

私信关注

vue如何适配移动端

猜你喜欢