| 基于等比缩放的大屏自适应方案 | 您所在的位置：网站首页 › vue如何做浏览器大小适配 › 基于等比缩放的大屏自适应方案 |
基于等比缩放的大屏自适应方案
|
前端的数据可视化越来越重要，炫酷大屏的需求越来越多，您是否经常为屏幕不能自适应而烦恼？如何高度还原设计稿？如何在多种终端都呈现完美效果？也许本文可以给您带来帮助 当屏幕宽高比例小于设计稿时，按设计稿比例沿水平方向铺满屏幕。当屏幕宽高比大于设计稿时，按设计稿比例沿垂直方向铺满屏幕。用等比缩放的方式，不论屏幕多大，分辨率是什么，都能呈现完美效果，如下图所示。 本文总结了两种基于等比缩放的大屏自适应方法。以下面的布局为例来说明。 A B C D E 1. 基于transform的自适应方法首先计算缩放比，根据屏幕大小动态设置元素的缩放比。代码如下所示： function setScale(){ let designWidth = 1366;//设计稿的宽度，根据实际项目调整 let designHeight = 768;//设计稿的高度，根据实际项目调整 let scale = document.documentElement.clientWidth/document.documentElement.clientHeight < designWidth/designHeight ? (document.documentElement.clientWidth / designWidth): (document.documentElement.clientHeight / designHeight); document.querySelector('#screen').style.transform = `scale(${scale}) translate(-50%)`; } window.onresize = function () { setScale() };然后设置样式，元素大小完全按照设计稿大小设置。代码如下所示： $design_width: 1366px;//设计稿的宽度，根据实际项目调整 $design_height: 768px;//设计稿的高度，根据实际项目调整 .screen-wrapper { height: 100vh; width: 100vw; background-color: aqua; .screen{ display: inline-block; width: $design_width; height: $design_height; background: yellow; transform-origin: 0 0; position: absolute; left: 50%; .section{ height: 200px; width: 200px; outline: 1px solid #ddd; line-height: 200px; font-size: 40px; text-align: center; display: inline-block; } } }实现效果如下图所示，无论屏幕如何变化，屏幕的内容都是等比缩放展示，不会出现元素变形和错位。当屏幕的比例和设计稿比例一致，会呈现出最佳效果。 首先计算缩放比，根据屏幕大小动态设置，根元素html的fontSize值。 setFontSize() function setFontSize(){ let designWidth = 1366;//设计稿的宽度，根据实际项目调整 let designHeight = 768;//设计稿的高度，根据实际项目调整 var fontSize = document.documentElement.clientWidth/document.documentElement.clientHeight < designWidth/designHeight ? (document.documentElement.clientWidth / designWidth) * 12: (document.documentElement.clientHeight / designHeight) * 12; document.querySelector('html').style.fontSize = fontSize + 'px'; } window.onresize = function () { setFontSize() };设置样式，需将元素单位px转换成rem。 $design_width: 1366;//设计稿的宽度，根据实际项目调整 $design_height: 768;//设计稿的高度，根据实际项目调整 @function px2rem($px) { $design_font_size: 12; @return ($px/$design_font_size) + rem; } .screen-wrapper { height: 100vh; width: 100vw; background-color: aqua; display: flex; flex-direction: row; justify-content: center; .screen{ display: flex; flex-direction: row; justify-content: center; width: px2rem($design_width); height: px2rem($design_height); background: pink; .section{ height: px2rem(200); width: px2rem(200); border: 1px solid #000; line-height: px2rem(200); font-size: px2rem(100); margin: px2rem(20); text-align: center; display: inline-block; } } }如下图所示，同样实现了按设计稿的比例展示内容，无论屏幕如何变化，内容都是等比缩放展示，不会出现元素变形和错位。当屏幕的比例和设计稿比例一致，会呈现出最佳效果。 |
【本文地址】
公司简介
联系我们