基于等比缩放的大屏自适应方案 |
您所在的位置:网站首页 › h5变形动画 › 基于等比缩放的大屏自适应方案 |
前端的数据可视化越来越重要,炫酷大屏的需求越来越多,您是否经常为屏幕不能自适应而烦恼?如何高度还原设计稿?如何在多种终端都呈现完美效果?也许本文可以给您带来帮助 当屏幕宽高比例小于设计稿时,按设计稿比例沿水平方向铺满屏幕。当屏幕宽高比大于设计稿时,按设计稿比例沿垂直方向铺满屏幕。用等比缩放的方式,不论屏幕多大,分辨率是什么,都能呈现完美效果,如下图所示。 本文总结了两种基于等比缩放的大屏自适应方法。以下面的布局为例来说明。 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; } } }如下图所示,同样实现了按设计稿的比例展示内容,无论屏幕如何变化,内容都是等比缩放展示,不会出现元素变形和错位。当屏幕的比例和设计稿比例一致,会呈现出最佳效果。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |