1.vw原理解析
- vw是基于Viewport视窗的长度单位，这里的视窗（Viewport）指的就是浏览器可视化的区域，而这个可视区域是window.innerWidth/window.innerHeight的大小。
Viewport相关的单位有四个，分别为vw、vh、vmin和vmax:
- vw：是Viewport's width的简写,1vw等于window.innerWidth的1%
- vh：和vw类似，是Viewport's height的简写，1vh等于window.innerHeihgt的1%
- vmin：vmin的值是当前vw和vh中较小的值
- vmax：vmax的值是当前vw和vh中较大的值
- vmin和vmax是根据Viewport中长度偏大的那个维度值计算出来的，如果window.innerHeight > window.innerWidth则vmin取百分之一的window.innerWidth，vmax取百分之一的window.innerHeight计算。
- 如果设计稿的宽度是750px，那么100vw=750px,1vw=7.5px
2.Vue项目中使用vw实现移动端适配
安装PostCSS插件
- 在.postcssrc.js使用postcss
- 已经装好有postcss-import、postcss-url、autoprefixer
- 新增插件：
npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano --S
- 在.postcssrc.js文件对新安装的PostCSS插件进行配置：
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
// 使用postcss的插件实现vw适配移动端
// 由于cssnext和cssnano都具有autoprefixer,事实上只需要一个，所以把默认的autoprefixer删除掉，然后把cssnano中的autoprefixer设置为false
'postcss-aspect-ratio-mini': {}, // 用来处理元素容器宽高比
'postcss-write-svg': { // 用来处理移动端1px的解决方案
uft8:false
},
'postcss-cssnext': {}, // 让项目使用CSS未来特性 并对其做兼容性处理
'postcss-px-to-viewport': {
viewportWidth: 750, // 视窗的宽度，对应我们设计稿的宽度，一般是750
viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
unitPrecision: 3, // 指定'px'转换为视窗单位值得小数位数（很多时候无法整除）
viewportUnit:'vw', // 指定需要转换成的视窗单位,建议使用vw
selectorBlackList: ['.ignore','.hairliness'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值。
mediaQuery: false // 允许在媒体查询中转换`px`
},
'postcss-viewport-units': {}, // 给CSS的属性添加content的属性 配合viewport-units-buggyfill解决个别手机不支持vw
'cssnano': { // 压缩和清理CSS代码
preset: 'advanced',
autoprefixer: false,
'postcss-zindex': false
}
}
}
vw兼容方案: 兼容个别手机
- 主要使用viewport-units-buggyfill.js和viewport-units-buggyfill.hacks.js，只需要在你的HTML文件中引入这两个文件。比如在Vue项目中的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>- 在HTML文件中调用
viewport-units-buggyfill
<!--使用viewport-units-buggyfill解决个别手机不支持vw--> <script> window.onload = function () { window.viewportUnitsBuggyfill.init({ hacks: window.viewportUnitsBuggyfillHacks }); } </script>- 前面配置的postcss-viewport-units插件。这个插件将让你无需关注content的内容，插件会自动帮你处理。
