vue3项目屏幕适配（vite）

最新推荐文章于 2024-07-22 10:34:10 发布

「已注销」

最新推荐文章于 2024-07-22 10:34:10 发布

阅读量852

点赞数 1

分类专栏：开发中遇到的问题 # vue3 文章标签： javascript 前端 html5 css

晴天

本文链接：https://blog.csdn.net/jyaqingtianlove/article/details/132165012

版权

本文介绍了Vue3项目中的屏幕适配方法，包括基于rem的适配方案和基于scale的适配方案。对于不固定宽高比的Web应用，推荐使用rem，通过postcss-pxtorem和autoprefixer等工具实现。而对于固定宽高比的应用，可以利用CSS3的transform: scale()实现元素缩放。文章提供了具体的项目实战步骤。

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

基于rem的适配方案

rem是什么？
rem是指相对于根元素的字体大小的单位，在日常开发过程中我们通常把根元素（html/body）的字体设置为10px,方便于我们计算（此时子元素的1rem就相当于10px）。

适用场景
不固定宽高比的Web应用，适用于绝大部分业务场景
在这里插入图片描述
项目实战

安装依赖

npm i postcss-pxtorem autoprefixer amfe-flexible --save-dev

postcss-pxtorem 是PostCSS的插件，用于将像素单元生成rem单位 autoprefixer 浏览器前缀处理插件 amfe-flexible 可伸缩布局方案替代了原先的lib-flexible 选用了当前众多浏览器兼容的viewport

项目根目录创建 postcss.config.js 文件
在这里插入图片描述

module.exports = {
             
 plugins: {
   
  autoprefixer: {
   
   overrideBrowserslist: [
    "Android 4.1",
    "iOS 7.1",
    "Chrome > 31",
    "ff > 31",
    "ie >= 8",
    "last 10 versions", // 所有主流浏览器最近10版本用
   ],
   grid: true,
  },
  "postcss-pxtorem": {
   
   rootValue: 192, // 设计稿宽度的1/ 10 例如设计稿按照 1920设计 此处就为192
   propList: ["*", "!border"], // 除 border 外所有px 转 rem
   selectorBlackList: [".el-"], // 过滤掉.el-开头的class，不进行rem转换
  },
 },
};