前端工作至今终于找到一个比较理想的适配方案,觉得颇为好用,特来分享。
原文链接:https://www.w3cplus.com/mobile/vw-layout-in-vue.html
原文作者讲解很是详细(我看到的时候还没有收费哈哈哈),特意总结记录一下,项目建立在vue基础上,vue起步可以看这篇文章。注:此篇文中用到的vue-cli已有更新的版本,可自行到官网查看学习。
主要总结一下需要安装的插件以及相关配置:
一、插件
一般vue建项目之初,已经有了postcss-import、postcss-url以及autoprefixer(如果没有的话执行如下命令自行安装),
cnpm i postcss-import postcss-url --S
还需安装如下插件
cnpm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano --S
安装之后在项目根目录下的package.json
文件中,应看到这些插件:(如果发现有缺少的,再安装上缺少插件就好)
二、配置
在根目录下找到.postcssrc.js文件,如果是最新版vue cli找到postcssrc.config.js文件,进行如下配置:
module.exports = {
plugins: {
'postcss-import': {},
'postcss-url': {},
'postcss-aspect-ratio-mini': {},
'postcss-write-svg': { utf8: false },
'postcss-cssnext': {},
'postcss-px-to-viewport': {
viewportWidth: 1136, // (Number) The width of the viewport.
viewportHeight: 2360, // (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': {},
'cssnano': {
preset: 'advanced',
autoprefixer: false,
'postcss-zindex': false
}
}
}
注:1.把配置文件中原有的autoprefixer:{}删掉。 2.viewportWidth和viewportHeight为你所用的设计图的宽高
三、启动项目
如有关于cssnano advanced的报错,再
cnpm i cssnano-preset-advanced --S
就好啦。接下来你就可以完全用设计图中的尺寸设置图片、文字、间距,全写确定px值,会自动转为vw和vh,简直是巨巨巨方便~~~
补充:原文作者最后有提到兼容安卓版本4.4以下手机自带浏览器的,可以在index.html中添加
<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>
<script>
window.onload = function () {
window.viewportUnitsBuggyfill.init({
hacks: window.viewportUnitsBuggyfillHacks
})
}
</script>
另外,我有遇到ios中不认识css的content属性的情况导致图片不显示,只好全局加了个样式:(觉得此解决办法甚low,如果有更好的烦请告知,先行谢过啦~)
* {
content: none !important;
}
第一次发文章,如有雷同纯属巧合,如有错误请指出,原创文章如需转载请标明出处。笔芯笔芯❤️