两种屏幕适配方案（供参考）

.screen-container{高度：100%；背景色：浅青色；显示：弹性；证明内容：居中；对齐项目：居中；.screen-content{宽度：1920px；高度：1080px；背景色：#fff；显示：弹性；证明内容：居中；对齐项目：居中；弹性方向：列；.屏幕标题{字体大小：32px；}.screen-img{margin-top:20px;}}}基于rem的适配方案rem是指字体大小相对于根元素的单位。在日常的开发过程中，我们通常会将根元素（html/body）的字体设置为10px，方便我们计算（此时子元素的1rem相当于10px）。适用场景宽高比不固定的Web应用，适合大部分业务场景安装依赖npmipostcss-pxtoremautoprefixeramfe-flexible--save-devpostcss-pxtorem是一个PostCSS插件，用于从像素单位生成rem单位到autoprefixer浏览器前缀处理插件amfe-flexible可扩展布局方案替代了原来的lib-flexible，选择兼容当前很多浏览器的视口项目根目录，创建一个postcss.config.js文件module.exports={plugins:{autoprefixer:{overrideBrowserslist:["Android4.1","iOS7.1","Chrome>31","ff>31","ie>=8","last10versions",//用于最后10个版本所有主流浏览器],grid:true,},"postcss-pxtorem":{rootValue:192,//设计稿宽度的1/10。比如设计稿是按照1920设计的，这里是192propList:["*","!border"],//将除border以外的所有px转换为remselectorBlackList:[".el-"],//Filter.el-开头的out类，不进行rem转换},},}；在main.ts/js文件中导入依赖项import"amfe-flexible/index.js";项目重启scale-based适配方案在CSS3中，我们可以使用transform属性的scale()方法来实现元素的缩放效果。缩放是指“缩小”和“放大”的意思。转换：scaleX(x)；/沿x轴方向缩放/transform:scaleY(y);/沿y轴方向缩放/transform:scale();/同时沿x轴和y轴缩放/适用场景固定宽高比对于web应用，比如大屏或者固定窗口的业务应用，新建resize.ts/js文件import{ref}from"vue";exportdefaultfunctionwindowResize(){//*指向最外层的容器constscreenRef=ref();//*计时函数consttimer=ref(0);//*默认缩放值constscale={width:"1",height:"1",};//*设计稿尺寸(px)constbaseWidth=1920;constbaseHeight=1080;//*要保持的比例（默认1.77778）constbaseProportion=parseFloat((baseWidth/baseHeight).toFixed(5));constcalcRate=()=>{//当前纵横比constcurrentRate=parseFloat((window.innerWidth/window.innerHeight).toFixed(5));if(screenRef.value){if(currentRate>baseProportion){//表示更宽的scale.width=((window.innerHeight*baseProportion)/baseWidth).toFixed(5);scale.height=(window.innerHeight/baseHeight).toFixed(5);screenRef.value.style.transform=`scale(${scale.width},${scale.高度})`;}else{//意味着更高scale.height=(window.innerWidth/baseProportion/baseHeight).toFixed(5);scale.width=(window.innerWidth/baseWidth).toFixed(5);screenRef.value.style.transform=`scale(${scale.width},${scale.height})`;}}};constresize=()=>{clearTimeout(timer.value);timer.value=window.setTimeout(()=>{calcRate();},200);};//改变窗口大小并重绘constwindowDraw=()=>{window.addEventListener("resize",resize);};//改变窗口大小重绘constunWindowDraw=()=>{window.removeEventListener("resize",resize);};return{screenRef,calcRate,windowDraw,unWindowDraw,};}相关接口importresize.ts/js