数据可视化自适配模板

最新推荐文章于 2024-07-25 13:50:26 发布

KK_Serve

最新推荐文章于 2024-07-25 13:50:26 发布

阅读量127

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/m0_37850275/article/details/123614436

版权

本文介绍了如何使用flexible.js实现数据可视化页面的屏幕自适应。通过设置body的字体大小以及利用rem单位，确保在不同尺寸的屏幕上保持布局一致性。代码示例展示了在Vue项目中应用flexible.js的方法，以及对应的CSS样式以展示三栏布局。同时，提到了对0.5px边框支持的检测。

摘要由CSDN通过智能技术生成

数据可视化自适配

效果图
在这里插入图片描述
屏幕适配
1.使用flexible
flexible.js
进行屏幕适配，flexible.js把屏幕分成24等份（也可以自定义别的份数），1920/24=80，所以此时适配时1rem=80px。在VSCode中使用“cssrem”插件，自动转换。在设置中把转换单位换成80。使用时直接引入js文件即可。
在这里插入图片描述
flexible.js 代码

(function flexible(window, document) {
    var docEl = document.documentElement;
    var dpr = window.devicePixelRatio || 1;
   
    // adjust body font size
    function setBodyFontSize() {
      if (document.body) {
        document.body.style.fontSize = 12 * dpr + "px";
      } else {
        document.addEventListener("DOMContentLoaded", setBodyFontSize);
      }
    }
    setBodyFontSize();
   
    // set 1rem = viewWidth / 10
    function setRemUnit() {
      var rem = docEl.clientWidth / 24;  // 这里默认是10等份，手动改为24，此时1rem=1920/24px即80px。（设计稿是1920px的）
      docEl.style.fontSize = rem + "px";
    }
   
    setRemUnit();
   
    // reset rem unit on page resize
    window.addEventListener("resize", setRemUnit);
    window.addEventListener("pageshow", function (e) {
      if (e.persisted) {
        setRemUnit();
      }
    });
   
    // detect 0.5px supports
    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);

在main.js中引用flexible.js 即可
上代码：

<template>
    <div class="page">
        <div class="page_title">数据可视化</div>
        <div class="page_bagView">
        <div class="bagView_left">
            <div class="bagView_left1">123</div>
            <div class="bagView_left1">123</div>
            <div class="bagView_left1">123</div>
            <div class="bagView_left1">123</div>
        </div>
        <div class="bagView_Center">
            <div class="bagView_center1">456</div>
            <div class="bagView_center1">456</div>
        </div>
        <div class="bagView_right">
            <div class="bagView_right1">123</div>
            <div class="bagView_right1">123</div>
            <div class="bagView_right1">123</div>
            <div class="bagView_right1">123</div>
        </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
export default {
  data() {
    return {};
  },
  //计算属性
  components: {},
  mounted() {},
  //事件处理函数
  methods: {},
};
</script>

<style scoped lang="less">
    .page{
        padding: 10px;
        background-color: #041a2c;
    .page_title{
        width: 100vw;
        height: 2.8125rem /* 45/16 */;
        display: flex;
        justify-content: center;
        align-content: center;
        line-height: 2.8125rem /* 45/16 */;
        color: #eee;
    }
    .page_bagView {
         /* 50/16 *//* 45/16 */
        display: flex;
        justify-content: space-between;
        align-content: center;
        margin: 5px;
        color: #eee;
        .bagView_left {
            height: 100vh;
            flex: 1;
            display: flex;
            justify-content: center;
            align-content: center;
            flex-direction: column;
            .bagView_left1{
                flex: 1;
                margin: 5px;
                display: flex;
                justify-content: center;
                align-content: center;
                align-items: center;
                border: 1px solid #eee;
                

            }
        }
        .bagView_Center {
             height: 100vh;
               display: flex;
            justify-content: center;
            align-content: center;
            flex-direction: column;
            flex: 2;
            .bagView_center1{
                flex: 1;
                border: 1px solid #eee;
                margin: 5px;
                display: flex;
                justify-content: center;
                align-content: center;
                align-items: center;
            }
        }
        .bagView_right {
             height: 100vh;
               display: flex;
            justify-content: center;
            align-content: center;
            flex-direction: column;
            flex: 1;
            .bagView_right1{
                flex: 1;
                border: 1px solid #eee;
                margin: 5px;
                display: flex;
                justify-content: center;
                align-content: center;
                align-items: center;
            }
        }
    }
  
  }
</style>