一次搞懂数据大屏适配方案 (vw vh、rem、scale)

于 2024-08-27 15:08:39 发布
阅读量1.4k 收藏 13
点赞数 21
分类专栏： 前端大数据可视化 文章标签： 前端 html vue.js javascript css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35430208/article/details/141602965
版权

当接到可视化大屏需求时，你是否会有以下疑问👇
如何做一款定制化的数据大屏？
开发可视化数据大屏如何做自适应？
vw vh、rem、scale 到底哪种比较好？
时间不够，有没有偷懒的方法？

最近在公司开发了一个可视化大屏，开发定制化大屏，大家可能都一个感受，开发大屏主要是两方面的工作：

  • 大屏之关键-前期的自适应适配

  • 根据 ui 稿绘制图表，调细节

而解决了适配问题后，后面就只是一个慢工出细活，耗时间的事情了。

适配方案分析

看了网上的各种方案，目前大家采用的大概有 3 种👇

方案实现方式优点缺点
vw vh1.按照设计稿的尺寸，将px按比例计算转为vw和vh1.可以动态计算图表的宽高，字体等，灵活性较高 2.当屏幕比例跟 ui 稿不一致时，不会出现两边留白情况1.每个图表都需要单独做字体、间距、位移的适配，比较麻烦
scale1.通过 scale 属性，根据屏幕大小，对图表进行整体的等比缩放1.代码量少，适配简单 2.一次处理后不需要在各个图表中再去单独适配1.因为是根据 ui 稿等比缩放，当大屏跟 ui 稿的比例不一样时，会出现周边留白情况 2.当缩放比例过大时候，字体会有一点点模糊，就一点点 3.当缩放比例过大时候，事件热区会偏移。
rem + vw vh1.获得 rem 的基准值 2.动态的计算html根元素的font-size 3.图表中通过 vw vh 动态计算字体、间距、位移等1.布局的自适应代码量少，适配简单1.因为是根据 ui 稿等比缩放，当大屏跟 ui 稿的比例不一样时，会出现周边留白情况 2.图表需要单个做字体、间距、位移的适配

以上 3 种方案在实际应用中该怎么选择视具体情况而定，也有看到大家说自适应在地图的适配中会有一些兼容问题，我这边还没有实践过。

  • 如果想简单，客户能同意留白，选用 scale 即可

  • 如果需要兼容不同比例的大屏，并且想在不同比例中都有比较好的效果，图表占满屏幕，类似于移动端的响应式，可以采用 vw vh 的方案

  • 至于 rem，个人觉得就是 scale 和 vw vh 的综合，最终的效果跟 scale 差不多

接下来介绍下三种方案的具体实现，方案中的代码都以 vue2.0 和 vue-cli3 搭建的 vue 项目为例，因为是 demo，图表的一些细节就没有过多细致的调整了

方案一：vw vh

上效果

图片

当屏幕的尺寸比例刚好是 16:9 时

当屏幕的尺寸比例大于 16:9 时

图片

当屏幕的尺寸比例小于 16:9 时

图片

实现思路

按照设计稿的尺寸，将px按比例计算转为vw和vh，转换公式如下

假设设计稿尺寸为 1920*1080（做之前一定问清楚 ui 设计稿的尺寸）
即：网页宽度=1920px网页高度=1080px
我们都知道网页宽度=100vw网页宽度=100vh
所以，在 1920px*1080px 的屏幕分辨率下
1920px = 100vw
1080px = 100vh
这样一来，以一个宽 300px 和 200px 的 div 来说，其所占的宽高，以 vw 和 vh 为单位，计算方式如下:
vwDiv = (300px / 1920px ) * 100vwvhDiv = (200px / 1080px ) * 100vh
所以，就在 1920*1080 的屏幕分辨率下，计算出了单个 div 的宽高
当屏幕放大或者缩小时，div 还是以 vw 和 vh 作为宽高的，就会自动适应不同分辨率的屏幕

话不多说，上代码

css 方案 - sass

util.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;}

路径配置
只需在vue.config.js里配置一下utils.scss的路径，就可以全局使用了

vue.config.js

const path = require("path");
function resolve(dir) {  return path.join(__dirname, dir);}
module.exports = {  publicPath: "",  configureWebpack: {    name: "app name",    resolve: {      alias: {        "@": resolve("src"),      },    },  },  css: {    // 全局配置 utils.scs，详细配置参考 vue-cli 官网    loaderOptions: {      sass: {        prependData: `@import "@/styles/utils.scss";`,      },    },  },};

在 .vue 中使用

<template>    <div class="box">          </div></template>
<script>export default{    name: "Box",}</script>
<style lang="scss" scoped="scoped">/*  直接使用 vw 和 vh 函数，将像素值传进去，得到的就是具体的 vw vh 单位      */.box{    width: vw(300);    height: vh(100);    font-size: vh(16);    background-color: black;    margin-left: vw(10);    margin-top: vh(10);    border: vh(2) solid red;}</style>

css 方案 - less

utils.less

@charset "utf-8";
// 默认设计稿的宽度@designWidth: 1920;
// 默认设计稿的高度@designHeight: 1080;
.px2vw(@name, @px) {  @{name}: (@px / @designWidth) * 100vw;}
.px2vh(@name, @px) {  @{name}: (@px / @designHeight) * 100vh;}
.px2font(@px) {  font-size: (@px / @designWidth) * 100vw;}

路径配置
在vue.config.js里配置一下utils.less

const path = require("path");
function resolve(dir) {  return path.join(__dirname, dir);}
module.exports = {  publicPath: "",  configureWebpack: {    name: "app name",    resolve: {      alias: {        "@": resolve("src"),      },    },  },  css: {    // 全局配置utils.scss    loaderOptions: {      less: {        additionalData: `@import "@/styles/utils.less";`,      },    },  },};

在 .vue 中使用

<template>    <div class="box">          </div></template>
<script>export default{    name: "Box",}</script>
<style lang="scss" scoped="scoped">/*  直接使用 vw 和 vh 函数，将像素值传进去，得到的就是具体的 vw vh 单位      */.box{    width: vw(300);    height: vh(100);    font-size: vh(16);    background-color: black;    margin-left: vw(10);    margin-top: vh(10);    border: vh(2) solid red;}</style>

css 方案 - less

utils.less

@charset "utf-8";
// 默认设计稿的宽度@designWidth: 1920;
// 默认设计稿的高度@designHeight: 1080;
.px2vw(@name, @px) {  @{name}: (@px / @designWidth) * 100vw;}
.px2vh(@name, @px) {  @{name}: (@px / @designHeight) * 100vh;}
.px2font(@px) {  font-size: (@px / @designWidth) * 100vw;}

路径配置
在vue.config.js里配置一下utils.less

const path = require("path");
function resolve(dir) {  return path.join(__dirname, dir);}
module.exports = {  publicPath: "",  configureWebpack: {    name: "app name",    resolve: {      alias: {        "@": resolve("src"),      },    },  },  css: {    // 全局配置utils.scss    loaderOptions: {      less: {        additionalData: `@import "@/styles/utils.less";`,      },    },  },};

在 .vue 文件中使用

<template>    <div class="box">          </div></template>
<script>export default{    name: "Box",}</script>
<style lang="less" scoped="scoped">/*  直接使用 vw 和 vh 函数，将像素值传进去，得到的就是具体的 vw vh单位      */.box{    .px2vw(width, 300);    .px2vh(height, 100);    .px2font(16);    .px2vw(margin-left, 300);    .px2vh(margin-top, 100);    background-color: black;}</style>

定义 js 样式处理函数

// 定义设计稿的宽高const designWidth = 1920;const designHeight = 1080;
// px转vwexport const px2vw = (_px) => {  return (_px * 100.0) / designWidth + 'vw';};
export const px2vh = (_px) => {  return (_px * 100.0) / designHeight + 'vh';};
export const px2font = (_px) => {  return (_px * 100.0) / designWidth + 'vw';};

屏幕变化后，图表自动调整

这种使用方式有个弊端，就是屏幕尺寸发生变化后，需要手动刷新一下才能完成自适应调整

为了解决这个问题，你需要在各个图表中监听页面尺寸变化，重新调整图表，在 vue 项目中，也可以借助element-resize-detector，最好封装个 resize 的指令，在各图表中就只要使用该指令就可以了，毕竟作为程序员，能偷懒就偷懒

  1. 安装 element-resize-detector

npm install element-resize-detector --save

  1. 引入工具包在组件中使用或者在单独的 js 中使用

import resizeDetector from 'element-resize-detector'

  1. 封装 directive

    ​​​​​​​ 
    // directive.jsimport * as ECharts from "echarts";import elementResizeDetectorMaker from "element-resize-detector";import Vue from "vue";const HANDLER = "_vue_resize_handler";function bind(el, binding) {  el[HANDLER] = binding.value    ? binding.value    : () => {        let chart = ECharts.getInstanceByDom(el);        if (!chart) {          return;        }        chart.resize();      };  // 监听绑定的div大小变化，更新 echarts 大小  elementResizeDetectorMaker().listenTo(el, el[HANDLER]);}function unbind(el) {  // window.removeEventListener("resize", el[HANDLER]);  elementResizeDetectorMaker().removeListener(el, el[HANDLER]);  delete el[HANDLER];}// 自定义指令：v-chart-resize 示例：v-chart-resize="fn"Vue.directive("chart-resize", { bind, unbind });

  2. main.js 中引入

    import '@/directive/directive';

  3. html 代码<template>

      <div class="linechart">    <div ref="chart" v-chart-resize class="chart"></div>  </div></template>

这里要注意的是，图表中如果需要 tab 切换动态更新图表数据，在更新数据时一定不要用 echarts 的 dispose 方法先将图表移除，再重新绘制，因为 resize 指令中挂载到的图表实例还是旧的，就监听不到新的 chart 元素的 resize 了，更新数据只需要用 chart 的 setOption 方法重新设置配置项即可。

图表字体、间距、位移等尺寸自适应

echarts 的字体大小只支持具体数值（像素），不能用百分比或者 vw 等尺寸，一般字体不会去做自适应，当宽高比跟 ui 稿比例出入太大时，会出现文字跟图表重叠的情况

图片

 这里我们就需要封装一个工具函数，来处理图表中文字自适应了👇

  • 默认情况下，这里以你的设计稿是 1920*1080 为例，即网页宽度是 1920px (做之前一定问清楚 ui 设计稿的尺寸）

  • 把这个函数写在一个单独的工具文件dataUtil.js里面，在需要的时候调用

  • 其原理是计算出当前屏幕宽度和默认设计宽度的比值，将原始的尺寸乘以该值

  • 另外，其它 echarts 的配置项，比如间距、定位、边距也可以用该函数

  1. 编写 dataUtil.js 工具函数

    ​​​​​​​ 
    // Echarts图表字体、间距自适应export const fitChartSize = (size,defalteWidth = 1920) => {  let clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;  if (!clientWidth) return size;  let scale = (clientWidth / defalteWidth);  return Number((size*scale).toFixed(3));}

  2. 将函数挂载到原型上

    import {fitChartSize} from '@src/utils/dataUtil.js'Vue.prototype.fitChartFont = fitChartSize;​​​​​​​

  3. 这样你可以在.vue文件中直接使用this.fitChartSize()调用<template>

      <div class="chartsdom" ref="chart" v-chart-resize></div></template>
<script>export default {  name: "dashboardChart",  data() {    return {      option: null,    };  },  mounted() {    this.getEchart();  },  methods: {    getEchart() {      let myChart = this.$echarts.init(this.$refs.chart);      const option = {        backgroundColor: "transparent",        tooltip: {          trigger: "item",          formatter: "{a} <br/>{b} : {c}%",        },        grid: {          left: this.fitChartSize(10),          right: this.fitChartSize(20),          top: this.fitChartSize(20),          bottom: this.fitChartSize(10),          containLabel: true,        },        calculable: true,        series: [          {            color: ["#0db1cdcc"],            name: "计划投入",            type: "funnel",            width: "45%",            height: "70%",            x: "5%",
            minSize: "10%",            funnelAlign: "right",
            center: ["50%", "50%"], // for pie
            data: [              {                value: 30,                name: "下单30%",              },              {                value: 55,                name: "咨询55%",              },              {                value: 65,                name: "点击65%",              },              {                value: 60,                name: "访问62%",              },              {                value: 80,                name: "展现80%",              },            ].sort(function (a, b) {              return a.value - b.value;            }),            roseType: true,            label: {              normal: {                formatter: function () {},                position: "inside",              },            },            itemStyle: {              normal: {                borderWidth: 0,                shadowBlur: this.fitChartSize(20),                shadowOffsetX: 0,                shadowOffsetY: this.fitChartSize(5),                shadowColor: "rgba(0, 0, 0, 0.3)",              },            },          },
          {            color: ["#0C66FF"],            name: "实际投入",            type: "funnel",            width: "45%",            height: "70%",            x: "50%",
            minSize: "10%",            funnelAlign: "left",
            center: ["50%", "50%"], // for pie
            data: [              {                value: 35,                name: "下单35%",              },              {                value: 40,                name: "咨询40%",              },              {                value: 70,                name: "访问70%",              },              {                value: 90,                name: "点击90%",              },              {                value: 95,                name: "展现95%",              },            ].sort(function (a, b) {              return a.value - b.value;            }),            roseType: true,            label: {              normal: {                position: "inside",              },            },            itemStyle: {              normal: {                borderWidth: 0,                shadowBlur: this.fitChartSize(20),                shadowOffsetX: 0,                shadowOffsetY: this.fitChartSize(5),                shadowColor: "rgba(0, 0, 0, 0.3)",              },            },          },        ],      };      myChart.setOption(option, true);    },  },  beforeDestroy() {},};</script>
<style lang="scss" scoped>.chartsdom {  width: 100%;  height: 100%;}</style>

方案二：scale

通过 css 的 scale 属性，根据屏幕大小，对图表进行整体的等比缩放，从而达到自适应效果

上效果

图片

当屏幕的尺寸比例刚好是 16:9 时，页面能刚好全屏展示，内容占满显示器

图片

当屏幕的尺寸比例小于 16:9 时，页面上下留白，左右占满并上下居中，显示比例保持 16:9

图片

当屏幕尺寸比例大于 16:9 时，页面左右留白，上下占满并居中，显示比例保持 16:9

图片

话不多说，上代码

html 部分​​​​​​​

<div className="screen-wrapper">    <div className="screen" id="screen">
    </div> </div>

js 部分​​​​​​​

<script>export default {mounted() {  // 初始化自适应  ----在刚显示的时候就开始适配一次  handleScreenAuto();  // 绑定自适应函数   ---防止浏览器栏变化后不再适配  window.onresize = () => handleScreenAuto();},deleted() {  window.onresize = null;},methods: {  // 数据大屏自适应函数  handleScreenAuto() {    const designDraftWidth = 1920; //设计稿的宽度    const designDraftHeight = 960; //设计稿的高度    // 根据屏幕的变化适配的比例    const scale =      document.documentElement.clientWidth /        document.documentElement.clientHeight <      designDraftWidth / designDraftHeight        ? document.documentElement.clientWidth / designDraftWidth        : document.documentElement.clientHeight / designDraftHeight;    // 缩放比例    document.querySelector(      '#screen',    ).style.transform = `scale(${scale}) translate(-50%, -50%)`;  },},};</script>

css部分

/*  除了设计稿的宽高是根据您自己的设计稿决定以外，其他复制粘贴就完事*/  .screen-root {    height: 100%;    width: 100%;    .screen {        display: inline-block;        width: 1920px;  //设计稿的宽度        height: 960px;  //设计稿的高度        transform-origin: 0 0;        position: absolute;        left: 50%;        top: 50%;    }}

实现思路

如何缩放

当屏幕宽高比 < 设计稿宽高比，我们需要缩放的比例是屏幕宽度 / 设计稿宽度
当屏幕宽高比 > 设计稿宽高比，我们需要缩放的比例是屏幕高度 / 设计稿高度​​​​​​​

const scale = document.documentElement.clientWidth / document.documentElement.clientHeight < designDraftWidth / designDraftHeight ?            (document.documentElement.clientWidth / designDraftWidth) :            (document.documentElement.clientHeight / designDraftHeight);

如果我们拿到的设计稿宽高为: 1920 * 960 px ，而我们的屏幕大小是 1440 * 900 px，那么 1440/900 = 1.6，920/960 = 2

因为 1.6 < 2 （当前屏幕宽高比小于设计稿宽高比）

所以我们需要缩放的比例是：屏幕宽度除以设计稿宽度 = 1440/1920 = 0.75

如何居中
首先我们利用 transform:translate(-50%,-50%) ，将动画的基点设为左上角

transform-origin：设置动画的基点(中心点)，默认点是元素的中心点

语法

transform-origin: x-axis y-axis z-axis;

然后利用transform:translate(-50%,-50%)，将图表沿 x，y 轴移动 50%

图片

接下来利用绝对定位将图表定位到中间位置​​​​​​​

position: absolute;left: 50%;top: 50%;

偷懒方法-插件

v-scale-screen是使用 css 属性 transform 实现缩放效果的一个大屏自适应组件，通过 scale 进行等比例计算，达到等比例缩放的效果，同时也支持铺满全屏，宽度等比，高度等比，等自适应方案,具体可查大屏自适应终极解决方案

方案三：rem + vw wh

上效果

图片

当屏幕的尺寸比例刚好是 16:9 时，页面能刚好全屏展示，内容占满显示器

图片

当屏幕的尺寸比例小于 16:9 时，页面上下留白，左右占满并上下居中，显示比例保持 16:9

图片

当屏幕尺寸比例大于 16:9 时，页面左右留白，上下占满并居中，显示比例保持 16:9

图片

实现思路

关于 rem
rem(font size of the root element)，是 css3 中新增的一个大小单位，即相对于根元素 font-size 值的大小。
自适应思路
动态的计算出页面的 fontsize 从而改变 rem 的大小。

  1. 拿 1920 * 1080 的标准屏幕大小为例，将屏幕分为10份，先计算rem 的基准值: 1920 / 10 = 192；

  2. 把所有元素的长、宽、位置、字体大小等原来的 px 单位全部转换成 rem；

  3. 网页加载后，用 js 去计算当前浏览器的宽度，并设置 html 的 font-size 为 (当前浏览器窗口宽度 / 10) 。
    这样的话 10rem 就刚好等于浏览器窗口的宽度，也就可以保证 100% 宽度，等比例缩放设计稿的页面了。 

    图片

因此 rem + vw vh 方案要解决三件事

  1. 获得 rem 的基准值；

  2. 页面内写一段 js 代码，动态的计算html根元素的font-size；

  3. 屏幕变化后，图表自动调整和图表字体、间距、位移等的自适应。

实现方案

第一点：获得 rem 的基准值

  1. 首先安装 @njleonzhang/postcss-px-to-rem 这个包

    npm i @njleonzhang/postcss-px-to-rem -D

  3. 在项目根目录新建.postcssrc.js配置文件

    module.exports = {  plugins: {    autoprefixer: {},    "@njleonzhang/postcss-px-to-rem": {      unitToConvert: 'px', // (String) 要转换的单位，默认是 px。      widthOfDesignLayout: 1920, // (Number) 设计布局的宽度。对于pc仪表盘，一般是 1920.      unitPrecision: 3, // (Number) 允许 rem 单位增长到的十进制数字.      selectorBlackList: ['.ignore', '.hairlines'], // (Array) 要忽略并保留为 px 的选择器.      minPixelValue: 1, // (Number) 设置要替换的最小像素值.      mediaQuery: false // (Boolean) 允许在媒体查询中转换 px.    }  }}

  4. 配置完成后，页面内的 px 就会被转换成 rem 了

第二点：动态的计算html根元素的font-size

  1. 在工具函数文件中新建一个 rem.js 文件，用于动态计算 font-size

    (function init(screenRatioByDesign = 16 / 9) {  let docEle = document.documentElement  function setHtmlFontSize() {    var screenRatio = docEle.clientWidth / docEle.clientHeight;    var fontSize = (      screenRatio > screenRatioByDesign        ? (screenRatioByDesign / screenRatio)        : 1    ) * docEle.clientWidth / 10;    docEle.style.fontSize = fontSize.toFixed(3) + "px";    console.log(docEle.style.fontSize);  }  setHtmlFontSize()  window.addEventListener('resize', setHtmlFontSize)})()

  2. 在入口文件 main.js 中引入 rem.js 文件

    import './utils/rem.js';

至此，页面就已经可以实现 16:9 自适应了。

第三点：屏幕变化，图表自适应
屏幕变化后，图表自动调整字体、间距、位移等，此处参考上面 vw vh 的实现方式即可，在此就不重复赘述了

参考资料

  • 推荐一个echarts 的案列网站，需要什么直接图表直接在上面去找，可以省去很多查 echarts 配置的时间
    全网echarts案例资源大总结和echarts的高效使用技巧（细节版）

  • scale 方案参考： 数据大屏最简单自适应方案，无需适配rem单位

  • vw vh 方案参考： Vue+Echarts企业级大屏项目适配方案

  • rem 方案参考：数据大屏rem适配方案

qq_35430208
关注
专栏目录
vue3 数据大屏处理1（vh-vm-rem）2（scale）数据大屏适配
jieweiwujie的博客
03-13 222
1 使用vh和vm 需要计算。2使用scale缩放 原理。
十五、vue3.0项目可视化大屏适配之less方法
张先森的博客
02-20 1202
vue3.0项目可视化大屏适配之less方法
最全的屏幕适配方案
codelang
06-29 5353
使用 直接在Application的onCreate方法中调用（Density类直接参照附录） Density.setDensity(this, 375f); 这个地方我们需要注意375f这个参数，针对这个参数，我们来好好说说。 375这个值是一个UI图的参照值，单位是dp，我参照的是1334*750像素的图 然后我们来看下px与dp的转换图 Android 单位...
数据大屏适配解决方案
luo121578的博客
10-10 1518
数据大屏 适配解决方案
数据大屏适配方案 （scale）
每天都要努力学习哦~~
06-19 4728
vw和vh他们是一个相对单位（类似em和rem）vw是：viewport width 视口宽度单位vh是： viewport height 视口高度单位- 相对视口的尺寸计算1vw=1/100视口宽度1vh=1/100视口高度eg:当前屏幕视口是375像素，1vw就是3.75像素。
【总结】1553- 一次搞懂数据大屏适配方案 (vw vh、rem、scale)
pingan8787
01-03 1221
前言当接到可视化大屏需求时，你是否会有以下疑问????如何做一款定制化的数据大屏？ 开发可视化数据大屏如何做自适应？ vm vh、rem、scale 到底哪种比较好？ 时间不够，有没有偷懒的方法？ 最近在公司开发了一个可视化大屏，开发定制化大屏，大家可能都一个感受，开发大屏主要是两方面的工作：大屏之关键-前期的自适应适配根据 ui 稿绘制图表，调细节而解决了适配问题后，后面就只是一个慢工出细活，耗时间的...
数据大屏的简单适配
~~~
04-06 2257
参考了Geeker-Admin开源框架，使用scale简单实现了数据大屏中最主要的适配问题。
postcss-px-to-viewport:PostCSS的插件，可从像素单位生成视口单位（vw，vh，vmin，vmax）。 通过一个设计尺寸在不同的显示器上创建可扩展界面的最佳选择
05-02
的插件，从像素单位生成视口单位（vw，vh，vmin，vmax）。 演示版 如果您的项目涉及固定宽度，则此脚本将有助于将像素转换为视口单位。 输入 . class { margin : -10 px .5 vh ; padding : 5 vmin 9.5 px 1 px ; ...
移动端html适配方案,原生js实现 兼容常规pc、大屏、移动端 适配方案
weixin_30909915的博客
06-08 1377
1、设计稿1)pc设计稿为19201080的可视化大屏，16：9比例设计2)大屏设计稿35841152的可视化大屏，28：9比例设计3)移动端设计稿 宽750的可视化大屏2、适配不同屏幕1)pc要兼容不同分辨率下的屏幕，注意这里说的是往下兼容 兼容1k以下的 不能出现滚动条 使用scale2)大屏比例为28：9，在项目开发中，可以按照1680：540 达到28:9的效果 不能出现滚动条 使用rem...
echarts 实现大屏自适应展示
10-14
echarts 实现大屏自适应展示
一种便捷的移动端屏幕适配解决方案
08-12
因此，一个有效的解决方案应该基于相对单位，如CSS的rem（root em）或vw/vh（viewport width/height的百分比），来实现布局的自适应性。 "auto-view-for-mobile-master"可能是一个开源项目，它可能包含一套基于...
爆肝十小时，为你总结出最全的数据大屏适配屏幕方案
qq_42365082的博客
11-07 3803
/ 读取文件 bufferedReader = new BufferedReader(fileReader);// 结果文本 StringBuilder resultText = new StringBuilder();// 行链表 用于查找 class样式名称 LinkedList < String > lineList = new LinkedList < >();
数据大屏的适配方案
weixin_44463883的博客
10-11 413
大屏适配方案
【CSS】1827- 一次搞懂数据大屏适配方案 (vw vh、rem、scale)
pingan8787
10-07 2951
作者：懒惰的智慧https://juejin.cn/post/7163932925955112996前言当接到可视化大屏需求时，你是否会有以下疑问????如何做一款定制化的数据大屏？发可视化数据大屏如何做自适应？vmvh、rem、scale到底哪种比较好？时间不够，有没有偷懒的方法？最近在公司开发了一个可视化大屏，开发定制化大屏，大家可能都一个感受，开发大屏主要是两方面的工作：大屏之关键-前期的自适应适...
vue3后台管理系统之数据大屏适配解决方案
m0_52704461的博客
11-05 4049
rem(font size of the root element)，是 css3 中新增的一个大小单位，即相对于根元素 font-size 值的大小。通过监听浏览器窗口的大小，来改变scale的比例，从而实现数据大屏适配。我们整个大屏的尺寸设置和设计图一样，只是通过css的scale放大缩小属性，来控制实际展示的大小。
大屏数据可视化适配三种方案： rem 、scale 和 zoom
旺旺
08-30 3963
大屏数据可视化适配三种方案： rem 、scale 和 zoom
vue3+ts+vite数据大屏自适应总结(两种方法)
最新发布
pipizhou16的博客
02-29 4335
vue数据大屏自适应总结(两种方法)
移动Web适配策略：rem与vw/vh解析
rem作为相对单位，常用于移动适配，而vw/vh是与视口宽度和高度相关的单位，被视为未来的解决方案。通过媒体查询，我们可以针对不同设备宽度设置差异化的CSS样式，实现网页的自适应布局。在实际项目中，通常将网页等...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

qq_35430208

您的鼓励是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值