前言

政企项目少不了大屏适配的场景，如何打造完美的大屏适配解决方案呢？

解决方案

大屏幕适配需要从以下几个方面入手，第一个是宽高、第二个是字体大小、第三个是三方库的设置。

1.针对宽高：

从最外层到最内部的所有盒模型布局相关（margin/padding/width/height），全部用百分比来完成，部分无法撑开的高度可以用vh来完成。

2.针对字体大小：

需要使用rem，并封装对应的flexible，根据视觉稿来对应

举个例子：

const baseSize = 16
// 设置 rem 函数
function setRem () {const scale = document.documentElement.clientWidth / 1920document.documentElement.style.fontSize = baseSize * Math.min(scale) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {setRem()
}

同时封装css预处理器相关函数：

@function pxTorem($px){//  默认16px@return $px / 16 * 1rem;
}

3.针对三方库

有些三方库设置的时候是以像素为主的，故而在大屏视频中，需要手动计算，故而我们需要在resize时做一段逻辑，拿到一个charScale的缩放比例，这里以vue的mixin为例子：

import _ from 'lodash'export default {data() {return {charScale: 0.5}},mounted() {this.__resizeHandler = _.debounce(() => {const clientWidth = document.body.clientWidthif (clientWidth) {this.charScale = clientWidth / 1920}}, 100)window.addEventListener('resize', this.__resizeHandler)this.charScale = document.body.clientWidth ? document.body.clientWidth / 1920 : 1},beforeDestroy() {window.removeEventListener('resize', this.__resizeHandler)},methods: {// use $_ for mixins properties// https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential$_sidebarResizeHandler(e) {if (e.propertyName === 'width') {this.__resizeHandler()}}}
}

一文讲清大屏适配（大到四个屏幕也不怕）相关推荐

一文讲清Python的7大学习路线（建议收藏）
现如今铺天盖地都是来自学习Python的勇士,Python这个编程语言中最友好的语言早已不是高不可攀的状态了. 无论是业余爱好,还是专职求学,学习Python的朋友都在依靠着自己的方法,勤勤恳恳的学习 ...
记公司项目中数字大屏适配4K大屏的问题
记公司项目中数字大屏适配4K大屏的问题在接手的时候,前端页面已经开发完成,div高度与宽度是百分比,所以适配问题不用考虑宽高问题,但字体边距等没有统一单位,要求适配4k屏首先4k屏的宽高是3840 ...
前端大屏适配几种方案
记录一下前端大屏的几种适配方案. 我们是1920*1080的设计稿. 文章目录一.方案一:rem+font-size 1.查看适配情况 1.1 1920*1080情况下 1.2 3840*2160( ...
echarts 大屏适配
两篇文章: 大屏适配解决方案 - 掘金更新!移动端最佳适配解决方案出炉第一个项目:vw,vh 适配 <meta name="viewport" content=" ...
Three.js + React + Echart(折线图光线流动效果，柱状图数据动态更新动画) + Svga-Web应用之数据大屏(适配1920*1080 2560*1440 3840*2160)
Web应用之数据大屏一.技术栈 React 17.0.0 搭建脚手架 Eahcrt常规图表 Svga动画 3D模型-Three.Js 大屏适配-目标大屏(4K -3840*2160) 二.React ...
Vue 前端数据大屏适配
逻辑分析: 采用了css3的缩放transform: scale(X)属性,我们不难发现本人改变分辨率时,scale的值是变化的.前端小伙们们看到这,想必也已经明白了大概. 我们只要监听浏览器窗口大的 ...
爆肝十小时，为你总结出最全的数据大屏适配屏幕方案
前言近期公司投放在展厅大屏中演示的大数据页面,出现了文字.图表.表格等多类组件显示错乱的情况,大部分原因还是适配问题. 我们做数据大屏时,因为显示器尺寸不同,会导致展示的时候有留白区域,效果不好,所 ...
Vue 可视化大屏适配方案
最近在做可视化大屏的适配,要求大屏页面能够在大屏和电脑自适应,查阅了一些资料,大体上有 3 种方案: 1.使用 transform 2.将 px 转化为 rem 3.使用 zoom 查看当前浏览器尺寸 ...
web端大屏适配解决方案
背景:近期公司投放在展厅大屏中演示的大数据页面,出现了文字.图表.表格等多类组件显示错乱的情况. 目的解决页面错乱问题,实现多种分辨率的大屏适配入坑分析俗话说的好,走过的最多路,就是网友们套路 ...

一文讲清大屏适配（大到四个屏幕也不怕）

前言

解决方案

1.针对宽高：

2.针对字体大小：

3.针对三方库

一文讲清大屏适配（大到四个屏幕也不怕）相关推荐

最新文章

热门文章