vue项目屏幕自适应（有大屏）

一：后台相关网站

目前做项目都是基于1920*1080窗口大小

有的要求屏幕自适应

我一直这样子做，挺简单的，今天分享给大家

第一步安装一个包

 只在开发环境需要

第二步

在vue.config.js文件中加入以下内容（没有就创建一个，与src目录同级）

module.exports={

  css: {

         extract: false,//false表示开发环境,true表示生成环境

         sourceMap: false,

         loaderOptions: {

           postcss: {

             plugins: [

               require("postcss-px-to-viewport")({

                 unitToConvert: "px",    // 需要转换的单位，默认为"px"

                 viewportWidth: 1920,   // 视窗的宽度，对应pc设计稿的宽度，一般是1920

                 viewportHeight: 1080,// 视窗的高度，对应的是我们设计稿的高度,我做的是大屏监控,高度就是1080

                 unitPrecision: 3,        // 单位转换后保留的精度

                 propList: [        // 能转化为vw的属性列表

                   "*"

                 ],

                 viewportUnit: "vw",        // 希望使用的视口单位

                 fontViewportUnit: "vw",        // 字体使用的视口单位

                 selectorBlackList: [],    // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。

                 minPixelValue: 1,        // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换

                 mediaQuery: false,        // 媒体查询里的单位是否需要转换单位

                 replace: true,        // 是否直接更换属性值，而不添加备用属性

                 exclude: /(\/|\\)(node_modules)(\/|\\)/,        // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件

               })

             ]

           }

         }

       }    

  }

 然后重新启动项目

就ok了，f12查看，单位就变成vm了

缺点（只能转化style标签里的）

二：大屏显示自适应

大屏显示的话，就要根据客户屏幕占满整个屏幕，而且布局不能乱

这里采用公司前辈给的办法：css的transform: scale（）可用

ui给的设计稿是1920*1080但是这是一个大屏项目（只显示数据，没其他操作）

先按1920*1080把整个项目写好

在最外层组件，类似app组件，添加css属性

废话不多说，上代码

就是获取浏览器窗口大小，获得比例，（一般都是要宽度比例，让宽度100%占满）把整个组件进行缩放