vue2.x使用响应式vw布局(px自动转为vw)

Posted 2023-04-16

参考技术A 浏览器支持一览

1、依赖包引入

yarn add postcss-px-to-viewport-opt postcss-viewport-units cssnano cssnano-preset-advanced --dev

2、更改项目根目录下.postcssrc.js文件配置

module.exports =

    "plugins":

        "postcss-import": ,

        "postcss-url": ,

        "autoprefixer": ,

        "postcss-px-to-viewport-opt":

        viewportWidth: 750,// 设计稿宽度

        viewportHeight: 1334,// 设计稿高度，可以不指定

        unitPrecision: 3,// px to vw无法整除时，保留几位小数

        viewportUnit: 'vw',// 转换成vw单位    

        selectorBlackList: ['.ignore', '.hairlines'],// 不转换的类名

        minPixelValue: 1,// 小于1px不转换

        mediaQuery: false, // 允许媒体查询中转换

        exclude: /(\/|\\)(node_modules)(\/|\\)/          // 排除node_modules文件中第三方css文件

        ,

        "postcss-viewport-units":,

        "cssnano":

            preset: "advanced",

            autoprefixer: false,// 和cssnext同样具有autoprefixer，保留一个

            "postcss-zindex": false

       

   



3、添加全局样式消除img被插件的影响

img

    content: normal !important;

css布局总体

各种布局

• • css发展时间线
  • 固定布局&静态布局（px）
  • 流式布局（百分比、vw/vh-----vw/vh有些浏览器或低版本不兼容）
  • 弹性布局（em/rem、flex）
  • 自适应布局
  • 响应式布局

css发展时间线

时间	新技术
1996	css1
1998	css2
2010	css3、响应式布局
2012	媒体查询
2017	grid

固定布局&静态布局（px）

固定宽度，然后居中。缺点：随着现在屏幕大小的不同化，屏幕太大留白就很多。

流式布局（百分比、vw/vh-----vw/vh有些浏览器或低版本不兼容）

宽高使用百分比，放大缩小。缺点：字体没法百分比调整，宽度太小字体等排版会混乱。

弹性布局（em/rem、flex）

根据根元素字体大小变化，进行缩放。比如高度2rem

自适应布局

宽度变化，进行缩放，样式整体不会有啥变化。缩放之后，要刷新页面才会进行重新布局。（多套代码，分别都是弹性布局或者固定布局，所以地址可能也有变化。相当于多个vue项目）

主要针对（320 480 760 960 1200 1600）六套。一般电商这种页面复杂的，两套就够了。

网站例子：https://www.ui.cn/ 缩小到很小之后,刷新一下会弹到 http://m.ui.cn/，可以看出刷新前一直是4个，刷新后是两个
例子2：亚马逊。

响应式布局

宽度变化，一行可能变两行以上，样式也会发生变化。缩放的同时，直接进行换行等，很丝滑。（一套代码，配合媒体查询）
网站例子：思否，缩小之后，左侧菜单直接收成标签，再缩小，变成横着的菜单。