数据大屏响应式布局的实现

实现方案:flexible+rem
分析

  • 一般数据大屏设计的宽度都是1920px,假设宽度分为24份,则一份为1920/24=80,所以设置1rem = 80px
  • 因此cssrem 插件的基准值是 80px。插件-配置按钮---配置扩展设置--Root Font Size 里面设置,但是别忘记重启vscode软件保证生效。

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 = (16 * dpr) + 'px'
            }
            else {
                document.addEventListener('DOMContentLoaded', setBodyFontSize)
            }
        }
        setBodyFontSize();
 
        // set 1rem = viewWidth / 24
        function setRemUnit () {
            var rem = docEl.clientWidth / 24
            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或者index.html中导入即可

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 基于ECharts数据可视化 代码下载[https://github.com/jiuchabaikaishui/W...
    酒茶白开水阅读 219评论 0 0
  • 写在前面的话第一次接触到大屏可视化的时候,毫无头绪,习惯性打开简书和掘金,在上面搜索优秀的大佬们的解决方案,看过多...
    原始l阅读 6,252评论 0 2
  • rem布局 1.rem单位 2.媒体查询 2.1 什么是媒体查询 2.2 媒体查询语法规范 2.3 媒体查询+re...
    Scincyc阅读 1,773评论 0 0
  • 移动web开发流式布局 ====================== 1.0 移动端基础 1.1浏览器现状 PC端...
    鱼来鱼往0709阅读 394评论 0 0
  • 移动web开发之rem布局 rem基础 rem单位 rem (root em)是一个相对单位,类似于em,em是父...
    我家有个王胖胖阅读 352评论 0 0