大屏适配方案

前言

• 你好，好久不见，我叫 itchao，很开心你能点进我的这个文章
• 最近公司安排我做大屏项目，需要涉及大屏适配问题，在开发期间查了很多资料，也得到同事很多帮助，很感谢他们！
• 现在大屏开发基本结束了，总结大屏适配方案如下，如有不对，敬请指正！谢谢！

1. 前提概念

1.1 常见大屏分辨率

• 1920 * 1080： 高清液晶显示器
• 2560 * 1440： 2K高清显示器
• 4096 * 2160： 4K高清显示器

1.2 适配要求

0. 大屏兼容原因：让项目在不同分辨率下都能正常显示，不出现元素变形等问题
1. 大屏适配分辨率范围：1080、2k、4k 等（以1920 * 1080 为设计稿分辨率）
2. 适配方案参考：css3 scale( ) 函数、rem

2. 适配方案详解

2.1 css3 的 scale 属性

1. 概念：css3 scale( ) 函数，用于修改元素的大小

2. 优点：

   • 通过向量形式定义缩放值放大或缩小元素，可以在不同方向设置不同缩放值
   • 监听浏览器的窗口大小，然后控制变化的比例

3. 缺点：

   • 可能会存在元素压缩变形问题
   • 当实际屏幕分辨率与基础屏幕分辨率的宽高比不一致时，会存在部分留白（如：以 1920 * 1080 为基础屏幕分辨率，当使用 4096 * 2160 的 4k 屏幕时，页面左右存在留白）

2.2 rem（实际方案）

1. 概念：rem 是 css3 的引入的一个大小单位，即相对于根元素（网页的 html ）的 font-size 值的大小

2. 例子：html 的 font-size 大小是 20px, 那么 1.4rem 和 2.4 rem 就分别代表着 28px 和 48px

3. 优点：

   • 动态的计算出页面的 fontsize 从而改变 rem 的大小，可以等比例缩放设计稿页面

4. 缺点：

   • 页面中使用了 echarts 图表, 里面的参数没办法应用 rem 的比例

3. 大屏实际适配方案（rem）

3.1 获取 rem 基准值

1. 默认容器分辨率为1920 * 1080

2. 安装 postcss-pxtorem 依赖包

   • npm install postcss-pxtorem@5.1.1 --save-dev

3. 配置 postcss-pxtorem

   • 在 vue.config.js 文件新增配置如下：

      module.exports = {
        //配置全局主题色
        css: {
          loaderOptions: {
            // postcss-pxtorem 具体配置
            postcss: {
              plugins: [
                require("postcss-pxtorem")({
                  rootValue: 192, // 设计稿宽度的1/10（基础分辨率 1920 * 1080）
                  propList: ["*"] // 需要做转化处理的属性，如`hight`、`width`、`margin`等，`*`表示全部
                })
              ]
            }
          }
        }
      }
     

3.2 动态计算 html 根元素的 font-size

1. 在 utils 文件夹下新建 rem.js 文件

    // 基准大小
    const baseSize = 192; // 以设计稿宽度的1/10（基础分辨率 1920 * 1080）
    // 设置 rem 函数
    function setRem() {
      let scale = document.body.clientWidth / 1920;  // 当前页面宽度相对于 1920 宽的缩放比例，可根据自己需要修改
        // 兼容横竖屏
      if (document.body.clientWidth < document.body.clientHeight) {
        //   竖屏
        scale = document.body.clientWidth / 1080;
      }
      if (document.body.clientWidth > document.body.clientHeight) {
        //   横屏
        scale = document.body.clientWidth / 1920;
      }
      // 设置页面根节点字体大小
      document.documentElement.style.fontSize = `${baseSize *
        Math.min(scale, 2)}px`;
    }
    
    // 初始化
    setRem();
    // 改变窗口时重新设置rem
    window.onresize = () => {
      setRem();
    };
   

2. 在 src 文件夹下的 main.js 文件中导入 rem.js 文件

    import '@/utils/rem.js' // 导入 rem.js 让加载项目时就计算 rem 值
   

加油！努力！（因为淋过雨，所以愿意为别人撑伞...）

加油！找到属于自己的时区，好好努力！未来你一定会感谢那个不放弃的自己！

我一定要成为非常优秀的前端开发工程师！争取早日成为全栈大佬！

itchao

2022年9月1日15:46:28