前端的数据可视化越来越重要,炫酷大屏的需求越来越多,您是否经常为屏幕不能自适应而烦恼?如何高度还原设计稿?如何在多种终端都呈现完美效果?也许本文可以给您带来帮助
当屏幕宽高比例小于设计稿时,按设计稿比例沿水平方向铺满屏幕。当屏幕宽高比大于设计稿时,按设计稿比例沿垂直方向铺满屏幕。用等比缩放的方式,不论屏幕多大,分辨率是什么,都能呈现完美效果,如下图所示。
本文总结了两种基于等比缩放的大屏自适应方法。以下面的布局为例来说明。
<div className="screen-wrapper">
<div className="screen" id="screen">
<div class="section">A</div>
<div class="section">B</div>
<div class="section">C</div>
<div class="section">D</div>
<div class="section">E</div>
</div>
</div>
1. 基于transform的自适应方法
首先计算缩放比,根据屏幕大小动态设置<div id="screen">元素的缩放比。代码如下所示:
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;
}
}
}
实现效果如下图所示,无论屏幕如何变化,屏幕的内容都是等比缩放展示,不会出现元素变形和错位。当屏幕的比例和设计稿比例一致,会呈现出最佳效果。
2. 基于rem的自适应方法
首先计算缩放比,根据屏幕大小动态设置,根元素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;
}
}
}
如下图所示,同样实现了按设计稿的比例展示内容,无论屏幕如何变化,内容都是等比缩放展示,不会出现元素变形和错位。当屏幕的比例和设计稿比例一致,会呈现出最佳效果。
3.总结
- 基于transform缩放的方案,优点是按设计稿设置元素大小,无需转换长度单位。缺点是放大展示时,echarts等图表会出现失真现象。为了避免图表失真,设计稿设计应按大屏尺寸设计,使其在屏幕中缩小展示。比如1920*1080和1366*768同为16:9的设计稿,应按1920*1080尺寸设计。
- 基于rem的缩放方案,元素长度单位需转换为rem。放大展示时,不会出现图表失真的情况。当缩小至根元素fontsize<12px时,由于浏览器展示的最小字号是12px,文字不能被再缩小,会出现比例不协调的情况。解决办法是,设置画布的最小宽度和最小高度,当屏幕小于最小宽度和最小高度时增加滚动条,使画布不再被缩小。