Vue进阶（幺陆捌）：前端用户体验提升（三）应用vw vh实现自定义布局_vue 开发官网的动态布局用vhvw还是

2401_84446513

于 2024-04-27 04:39:36 发布

阅读量910

点赞数 18

文章标签：前端 vue.js ux

本文链接：https://blog.csdn.net/2401_84446513/article/details/138237062

版权

本文介绍了如何在Vue项目中使用vw/vh单位实现自适应布局，包括引入postcss-viewport-units插件解决伪类选择器问题。对比%单位，vw/vh能直接获取视窗大小，适用于动态布局。同时，文章讨论了vw/vh的兼容性和相关拓展阅读，适合前端开发者提升用户体验。

摘要由CSDN通过智能技术生成

可以发现，绝大多数的浏览器支持vw单位。

1.4 vw/vh 应用

首先，在项目中引入插件

npm install postcss-import postcss-loader postcss-px-to-viewport --save-dev
npm i postcss-px-to-viewport-opt

然后在根目录下面创建postcss.config.js

module.exports = {
    plugins: {
        "autoprefixer": {
            path: ['./src/\*']
        },
        "postcss-import": {},
        "postcss-px-to-viewport-opt": {
            "viewportWidth": "1920", //视窗的宽度，对应的是我们设计稿的宽度
            "viewportHeight": "1080", // 视窗的高度
            "unitPrecision": 2, //指定`px`转换为视窗单位值的小数位数(很多时候无法整除)
            "viewportUnit": "vw", //指定需要转换成的视窗单位，建议使用vw
            "selectorBlackList": ['#nprogress'], //指定不转换为视窗单位的类
            "minPixelValue": 1, // 小于或等于`1px`不转换为视窗单位
            "medi