广州微网站建设,qq快速登录入口,网站建设可信赖,国外网站有哪些推荐的上一篇我们介绍了ViteVue3TypeScript项目中mockjs的安装和配置。本篇我们来介绍屏幕适配方案#xff0c;简单说来就是要最大程度上保证我们的界面在各种各样的终端设备上显示正常。通用的屏幕适配方案有两种#xff1a;① 基于rem 适配#xff08;推荐#xff0c;也是本篇要…上一篇我们介绍了ViteVue3TypeScript项目中mockjs的安装和配置。本篇我们来介绍屏幕适配方案简单说来就是要最大程度上保证我们的界面在各种各样的终端设备上显示正常。通用的屏幕适配方案有两种① 基于rem 适配推荐也是本篇要实现的方案适用场景不固定宽高比的Web应用适用于绝大部分业务场景② 基于 scale 适配适用场景固定宽高比的Web应用如大屏或者固定窗口业务应用个人还是比较推荐基于rem适配屏幕方案的就算是大屏还得分个屏大屏小呢更何况比例也经常不一致4:3的16:9的我还见过3:2的呢瞅着不就是个大电视吗废话少说撸起来....安装依赖rem适配方案主要用到三个依赖包postcss-pxtoremPostCSS的插件用于将像素单元生成rem单位autoprefixer浏览器前缀处理amfe-flexible可伸缩布局方案替代了原先lib-flexible选用了当前众多浏览器兼容的viewport//安装依赖
npm i postcss-pxtorem autoprefixer amfe-flexible -S配置vite.config.ts在vite.config.ts文件中引入对应依赖包并配置代码如下因为vite已经内联了postcss所以并不需要再去创建什么postcss.config.js文件直接在vite.config.ts中配置css即可//引入依赖
import autoprefixer from autoprefixer
import postcsspxtorem from postcss-pxtorem//配置适配方案
css: {postcss: {plugins: [autoprefixer({overrideBrowserslist: [Android 4.1,iOS 7.1,Chrome 31,ff 31,ie 8,last 10 versions, // 所有主流浏览器最近10版本用],grid: true}),postcsspxtorem({rootValue: 192, // 设计稿宽度的1/ 10 例如设计稿按照 1920设计 此处就为192propList: [*, !border], // 除 border 外所有px 转 remselectorBlackList: [.el-], // 过滤掉.el-开头的class不进行rem转换})],},
}使用适配方案在main.ts文件中导入依赖import amfe-flexible/index.js;重启项目运行效果运行效果如下OK至此屏幕适配完成我相信每天学习一点点收获成长亿点点
