关于大屏适配我所知道的

关键词: BI 大屏 数字驾驶舱 适配

典型有三种解决方案：

1. rem。其实就是监听resize事件，动态更新 html font-size。横竖屏切换的时候会有问题（需要监听屏幕变化重新设置 rootFontSize），需要刷新过才可以。
2. vh/vw/vmin/vmax 新特性，兼容性问题
3. transform：scale (value) 存在字体可能模糊的情况
4. 媒体查询 @media

好的大屏适配方案

• 大屏尺寸不变形
• 有一边（宽或高）撑满整个窗口（在不变形的前提下）
• 另外一边不能超出窗口（一边撑满窗口的前提下）
• 保持大屏清晰度

将大屏的初始化尺寸设置为 1920 * 1080，即宽高比为 16 ：9

transform：scale (value)

核心逻辑：通过控制大屏元素的 transform: scale 值来实现大屏的不变形缩放。

/*
* @params id: dom id
* @params type: single | double 单维度还是双维度
*/
function calcDomScale(id, type = 'single') {
  // 大屏初始化尺寸, 宽高比为 16 ：9
  const OriginWidth = 1920, OriginHeight = 1080; 
  const scale = Math.min(window.innerWidth / OriginWidth, window.innerHeight / OriginHeight);
  const dom = document.getElementById(id);
  dom.style.transform = `scale(${scale})`
  return false
}

媒体查询 @media

缺点： 页面上所有的元素都得在不同的 @media 中定义一遍不同的尺寸，代价有点高。 如果再多一种屏幕尺寸，就得多写一个 @media 查询块。

/* <375px */
@media screen and (max-width:375px) { 
  .box {
    width: 100%;
  }
}
/* >=375px and <450px */
@media screen and (min-width:375px) and (max-width:450px) {
  .box {
    width: 90%;
  }
}
/* >=450px */
@media screen and (min-width:450px) {
  .col{
    width: 80%;
  }
}

vh/vw

// utils.less
@charset "utf-8";

@originWidth: 1920; // 默认设计稿的宽度

@originHeight: 1080; // 默认设计稿的高度

.px2vw(@name, @px) {
  @{name}: (@px / @originWidth) * 100vw;
}

.px2vh(@name, @px) {
  @{name}: (@px / @originHeight) * 100vh;
}

.px2font(@px) {
  font-size: (@px / @originWidth) * 100vw;
}

这时候百度搜一下 react/vue 项目中如何使用 less 的方法。

// 配置文件 vue.config.js
module.exports = {
  // ...
  css: {
    loaderOptions: {
      less: {
        additionalData: `@import "@/styles/utils.less";`,
      },
    }
  }
}

// 具体使用
// 直接使用 vw 和 vh 函数，将像素值传进去，得到的就是具体的 vw vh单位
.box{
  .px2vw(width, 200);
  .px2vh(height, 200);
  .px2font(16);
  .px2vw(margin-left, 8);
  .px2vh(margin-top, 12);
}

// 定义设计稿的宽高
const originWidth = 1920;
const originHeight = 1080;


// px转vw
export const px2vw = (_px) => {
  return (_px * 100) / originWidth + 'vw';
};

export const px2vh = (_px) => {
  return (_px * 100) / originHeight + 'vh';
};

export const px2font = (_px) => {
  return (_px * 100) / originWidth + 'vw';
};