可视化大屏的几种适配方案

2022-11-17 0 1,690

一、css3 transform:scale()方法

在项目中直接使用设计稿中px单位进行开发即可,会对body内所有元素进行缩放,从而不会让echarts图表超出画布;

需要注意的是,绑定resize事件一定别忘了防抖,页面销毁别忘了移除监听事件

我们直接使用时如果显示屏幕并不是16:9,那么我们的项目就可能会出现空白,解决方案如下:

function resize() {
          var ratioX = $(window).width() / 1920; //此处的宽高根据自己屏幕的比例修改即可
          var ratioY = $(window).height() / 1080;
          $("body").css({
              transform: "scale(" + ratioX + "," + ratioY + ")",
              transformOrigin: "left top",
              backgroundSize: "100% 100%"
          });
          $("html").css({'overflow':'hidden'})
}

二、rem+grid(或百分比)

当页面首次加载时,判断视口的宽高,如果视口的宽/高 > 16/9 则说明视口宽度比较设计图宽,实际的显示宽度应该等于视口的高度*16/9。

如果视口的宽/高 < 16/9 则说明视口高度比设计图高,实际的显示宽度应该等于视口的宽度,显示高度应等于视口宽度 / (16/9)。

然后设置 font-size: pageWidth / 100 px,这样就可以做到100rem等于100% width,之后所有大小的设置都通过rem来做,这样就可以做到适配任意比例的大屏了。

<script>
  const clientWidth = document.documentElement.clientWidth
  const clientHeight = document.documentElement.clientHeight
  window.pageWidth = clientWidth / clientHeight > 16 / 9 ? clientHeight * (16 / 9) : clientWidth
  const pageHeight = pageWidth / (16 / 9)
  const string = `<style>html{
      font-size: ${pageWidth / 100}px
    }</style>`
  document.write(string)
 
  root.style.width = pageWidth + 'px'
  root.style.height = pageHeight + 'px'
  root.style.marginTop = (clientHeight - pageHeight) / 2 + 'px'
</script>

三、vw和vh适配方案

屏幕视口宽度 = 100vw,屏幕视口高度 = 100vh

vw和vh也是css中标准的单位,和px,rem, %一样 vw和vh适配方案,按照设计稿的尺寸,将px按比例计算转为vw和vh

那么我们需要封装一个处理函数,让它帮我自动计算,这里用到了scss

//使用scss的math函数,https://sass-lang.com/documentation/breaking-changes/slash-div
@use "sass:math"; 
 
 
//默认设计稿的宽度
$designWidth:1920;
//默认设计稿的高度
$designHeight:1080;
 
 
//px转为vw的函数
@function vw($px) {
  @return math.div($px , $designWidth) * 100vw;
}
 
//px转为vh的函数
@function vh($px) {  
  @return math.div($px , $designHeight) * 100vh;
}

 

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!cheeksyu@vip.qq.com
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有积分奖励和额外收入!
5.严禁将资源用于任何违法犯罪行为,不得违反国家法律,否则责任自负,一切法律责任与本站无关

源码下载

发表评论
暂无评论