做移动端 相信大家刚刚开始的时候 都会很反感 因为他不像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>
希望对大家有多帮助 有什么不明白的可以留言 如果解决了 就点个赞吧