1.项目根目录下,创建 .postcssrc.js 文件。
2.安装插件。
-D (开发依赖)
postcss-import
postcss-url
cssnano-preset-advanced
-S (开发、运行都依赖)
postcss-aspect-ratio-mini
postcss-px-to-viewport
postcss-write-svg
postcss-cssnext
cssnano
postcss-viewport-units
3.配置 .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, //视窗的宽度,对应的是我们设计稿的宽度,一般是750 viewportHeight: 1334, // 视窗的高度,根据750设备的宽度来指定,一般指定1334,也可以不配置 unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数(很多时候无法整除) viewportUnit: ‘vw‘, // 指定需要转换成的视窗单位,建议使用vw selectorBlackList: [‘.ignore‘, ‘.hairlines‘], // 指定不转换为视窗单位的类,可以自定义,可以无限添加,建议定义一至两个通用的类名 minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位,你也可以设置为你想要的值 mediaQuery: false // 允许在媒体查询中转换`px` }, "postcss-viewport-units":{}, "cssnano": { preset: "advanced", autoprefixer: false, "postcss-zindex": false }, } }
4. 根组件 App.vue 的style 中,加入以下样式:( 统一的宽度比默认属性 )
[aspectratio] { position: relative; } [aspectratio]::before { content: ‘‘; display: block; width: 1px; margin-left: -1px; height: 0; } [aspectratio-content] { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; } /*vm兼容处理使用Viewport Units Buggyfill造成的副作用,需要如下设置img*/ img { content: normal !important; }
比如:想要一个 750:250 的比例容器,html中的代码:
<div class="banner" w-750-250 aspectratio aspect-ratio="750/250"> <div aspectratio-content> <img src="" width="100%" height="100%"> </div> </div>
它对应的css样式:
[w-750-250] { width: 750px; } [w-750-250]{ aspect-ratio:‘750:250‘; }
5.vw的兼容处理 (有些手机不支持vw单位 )
5.1 Vue项目的index.html中引入如下JS 文件:
<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>
5.2 在html底部调用 viewport-units-buggyfill
<script> window.onload = function () { window.viewportUnitsBuggyfill.init({ hacks: window.viewportUnitsBuggyfillHacks }); </script>
6.自己没用第5点的方式使用 viewport-units-buggyfill,而是使用了 npm 安装的方式引入。
6.1 npm install viewport-units-buggyfill -S
6.2 项目的入口文件中(比如 main.js),引入:
var hacks = require(‘viewport-units-buggyfill.hacks‘); require(‘viewport-units-buggyfill‘).init({ hacks: hacks });
注:详细的配置说明,可以阅读 https://www.w3cplus.com/mobile/vw-layout-in-vue.html 这一篇好文。
本文只是学习并实践后的总结。插件不是都必须安装,可根据实际项目需要,自行决定。
原文地址:https://www.cnblogs.com/zy20160429/p/8915637.html
时间: 2024-11-05 19:26:20