可视化大屏适配解决方案

前言：可视化大屏开发在前端项目中日益增多，为解决大屏可在尽可能多的设备上都能展示，为此提供以下解决方案，可供参考。不仅如此，其他属性也可以乘上此比例，以下代码仅为示例，具体视项目情况而定。1.在公共样式文件中，将px按比例计算转为vw和vh。基准屏幕分辨率：1920 * 1080。2.将设计图中元素的宽高乘以此比例。

webopenbie

562人浏览 · 2023-02-01 15:04:15

webopenbie · 2023-02-01 15:04:15 发布

前言：可视化大屏开发在前端项目中日益增多，为解决大屏可在尽可能多的设备上都能展示，为此提供以下解决方案，可供参考。

基准屏幕分辨率：1920 * 1080

1.在公共样式文件中，将px按比例计算转为vw和vh

@vw: (1/1920) * 100vw;
@vh: (1/1080) * 100vh;

2.将设计图中元素的宽高乘以此比例

.checklist {
      width: 160 * @vw;
      height: 44 * @vw;
      line-height: 44 * @vw; 
}

不仅如此，其他属性也可以乘上此比例，以下代码仅为示例，具体视项目情况而定。

.checklist {
        position: absolute;
        z-index: 9;
        right: 20 * @vw;
        height: 44 * @vw;
        display: flex;
        align-items: center;
        font-size: 14 * @vw;
}