大屏自适应rem方案

Vue 大屏开发自适应 VScode | flexible.js | rem | echarts自适配
其实开发大屏这个适配是最费劲的,电脑的分辨率,电脑缩放比例,电脑浏览器缩放比例都很麻烦,当然了,大屏界面本来就对分辨率有些许的要求,太差劲的分辨率本来就不适用,因为毕竟要保持页面放得下,不能出现滚动条,不能遮挡啥的,我这边给的设计图是1920*1080的,所以保证在这个分辨率下面,只要附近的分辨率和缩放不出问题就差不多了。

然后,我就从网上找了个大神的博客,抄了一下,感觉还行,啊哈哈哈哈,转载一下,自己学习使用,不喜勿喷!

大屏自适应的核心目标有
字体大小随屏幕尺寸自适应变化

自动撑满全屏

弹性布局(使用 css 的flex布局)

顺便分享一下大佬整理的CSS样式全集

重要提示:电脑开发大屏时,要使用浏览器全屏(按F11)查看最终效果!

使用flexible.js + rem实现字体自适应
flexible.js用于根据屏幕尺寸变化动态调整根元素的字体大小。

rem(font size of the root element)则是相对于根元素的字体大小单位。

新建flexible.js

// 来自 https://github.com/amfe/lib-flexible/blob/2.0/index.js
(function flexible(window, document) {
  var docEl = document.documentElement;
  // 获取当前显示设备的物理像素分辨率与CSS像素分辨率之比;
  var dpr = window.devicePixelRatio || 1;

  //根据分辨率调整全局字体大小
  function setBodyFontSize() {
    // html已完成加载,则立即调整字体大小,否则等待html加载完成再调整字体大小
    if (document.body) {
      document.body.style.fontSize = 12 * dpr + "px";
    } else {
      // 监听DOMContentLoaded 事件——当初始的 HTML 文档被完全加载和解析完成之后触发,无需等待样式表
      document.addEventListener("DOMContentLoaded", setBodyFontSize);
    }
  }
  setBodyFontSize();

  // 根据屏幕宽度,重置1rem的长度为当前屏幕宽度的1/10
  function setRemUnit() {
    var rem = docEl.clientWidth / 10;
    // 1rem的值永远为根元素的字体大小,所以此处通过调整全局字体大小来重置rem
    docEl.style.fontSize = rem + "px";
  }

  setRemUnit();

  // 监听resize事件——屏幕大小发生变化时触发
  window.addEventListener("resize", setRemUnit);
  // 监听pageshow事件——显示页面时触发
  window.addEventListener("pageshow", function(e) {
    // 若是浏览器中点击后退时显示页面,则重置rem
    if (e.persisted) {
      setRemUnit();
    }
  });

  // 检测是否支持0.5px
  if (dpr >= 2) {
    var fakeBody = document.createElement("body");
    var testElement = document.createElement("div");
    testElement.style.border = ".5px solid transparent";
    fakeBody.appendChild(testElement);
    docEl.appendChild(fakeBody);
    if (testElement.offsetHeight === 1) {
      docEl.classList.add("hairlines");
    }
    docEl.removeChild(fakeBody);
  }
})(window, document);

引入flexible.js
在需要使用的文件中引用

import "./utils/flexible.js";

将px转换为rem
转换规则:

rem值 = px值*10/设计图宽度
举例:设计图的宽度为3840px,当前div元素的宽度384px

则转换为rem后为 384*10/3840 = 1rem

所以转换后页面中css的效果如下:

.mapBox {
  position: absolute;
  top: 0.963542rem /* 370/384 */;
  height: 3.125rem /* 1200/384 */;
  width: 5.208333rem /* 2000/384 */;
  left: 50%;
  transform: translate(-50%, 0);
}

如此复杂的计算,当然有神器相助!

vscode 中 px2rem 插件自动计算 rem
px2rem 是一个很棒的插件,可以将 px 自动计算成需要的 rem。

下载安装px2rem插件
在这里插入图片描述

设置px2rem插件的转换系数

在这里插入图片描述

重启vscode
安装设置完这个插件之后,需要重启 VScode 才能生效。
![在这里插入图片描述](https://img-blog.csdnimg.cn/3ff97ee97b85448d960ee00765bd7022.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6aOO5YS_5oWi5oWi6LeR,size_15,color_FFFFFF,t_70,g_se,x_16#pic_center

使用px2rem插件
在大屏页面中,输入px时,会自动帮你计算对应的rem值。

注释 /* 12/384 */ 里面,前面的 12 是px的值,384是转换系数。

echarts自适配
rem如此强大,但echarts默认使用的px为单位,且不能在echarts配置中携带rem单位,怎么办?

其实很简单。

添加fontSize函数
在图表配置的页面添加下方的转换函数,其中3840为设计稿的宽度,记得根据实际情况修改!

function fontSize(res) {
  let docEl = document.documentElement,
    clientWidth =
      window.innerWidth ||
      document.documentElement.clientWidth ||
      document.body.clientWidth;
  if (!clientWidth) return;
  // 此处的3840 为设计稿的宽度,记得修改!
  let fontSize = clientWidth / 3840;
  return res * fontSize;
}

使用fontSize函数实现转换
所有图表配置中涉及尺寸的数据,都要用fontSize进行转换,包括定位、字体大小、宽度、内外边距……

此时无需任何计算,只需用fontSize()包裹原数据即可,fontSize函数会帮你完成适配!

  legend: [
    {
      data: ["人数"],
      top: fontSize(10),
      right: fontSize(320),
      itemWidth: fontSize(14),
      textStyle: {
        color: "#fff",
        fontSize: fontSize(20),
      },
    },

记得监听屏幕尺寸变化事件,及时重绘图表

import echarts from "echarts";
let option = {…… 图表配置 ……}
let chart = echarts.init(this.$refs.myChart);
chart.setOption(option);
// 添加窗口大小改变监听事件,当窗口大小改变时,图表会重新绘制,自适应窗口大小
window.addEventListener("resize", function() {
  chart.resize();
});

完成!

Vue 大屏开发自适应 VScode | flexible.js | rem | echarts自适配
大屏自适应的核心目标有
使用flexible.js + rem实现字体自适应
新建flexible.js
引入flexible.js
将px转换为rem
vscode 中 px2rem 插件自动计算 rem
下载安装px2rem插件
设置px2rem插件的转换系数
重启vscode
使用px2rem插件
echarts自适配
添加fontSize函数
使用fontSize函数实现转换
记得监听屏幕尺寸变化事件,及时重绘图表

  • 5
    点赞
  • 44
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
回答: 在Vue大屏设计中实现自适应的方法有多种。一种方法是通过配置文件设置大屏设计的尺寸,如将宽度设置为1920像素,高度设置为1080像素,并设置缩放比例为20。\[1\]另一种方法是在组件中使用样式来实现自适应。可以使用flex布局来实现垂直居中,并设置各个组件的宽度比例,如左侧组件宽度为410/96rem,中间组件宽度为1060/96rem,右侧组件宽度为450/96rem。\[2\]还可以使用ScaleBox组件来实现自适应,通过设置最小宽度为1200像素,并在ScaleBox组件内部包裹需要自适应的内容,如图片。\[3\]这些方法都可以根据不同的需求来实现Vue大屏自适应效果。 #### 引用[.reference_title] - *1* *2* [Vue 大屏可视化-屏幕自适应(保持设计尺寸比例)](https://blog.csdn.net/u011097323/article/details/105288458)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [Vue大屏自适应缩放解决方案 = 使用transform:scale](https://blog.csdn.net/weixin_47663795/article/details/127615424)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值