关键词: BI 大屏 数字驾驶舱 适配
典型有三种解决方案：
rem。其实就是监听resize事件，动态更新 htmlfont-size。横竖屏切换的时候会有问题（需要监听屏幕变化重新设置 rootFontSize），需要刷新过才可以。vh/vw/vmin/vmax新特性，兼容性问题transform：scale (value)存在字体可能模糊的情况- 媒体查询
@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'; };
