小结一波~

前言

大屏使用rem 耗时而且对浏览器最小字体不支持，使用transform:scale可以节省百分之九十工作量且保证页面宽高在任何情况下等比例缩放

一、使用步骤

1.在src文件下的utils文件夹里新建fixer.js文件(名字自定义)

代码如下（示例）：

//先用设计图3840x1080的模式当基础宽高，项目开始可以根据设计图自定义
// 1080px
let baseHeight = 1080
// 3840px
let baseWidth = 3840
const graphicSize = {height: 1080,width: 3840,scale:1,
}function getAntiScaleRatio(scaleRatio) {const seed = 1000000000return seed / (seed * scaleRatio);
}function calculateSize() {const scaleBigRatioHeight = baseHeight / document.body.offsetHeightgraphicSize.height = document.body.offsetHeight * scaleBigRatioHeight;graphicSize.scale = getAntiScaleRatio(scaleBigRatioHeight)graphicSize.width = document.body.offsetWidth * scaleBigRatioHeight;
}export function getGraphicSize() {calculateSize();return graphicSize;
};export function bindWindowSizeChanged(callback) {calculateSize();window.onresize = () => {calculateSize.bind(this)();callback&&callback();}
}

2.主页面引入js文件

同时为了使页面都在屏幕内，最外层设置样式

.epidemic_home_box {width: 100%;height: 100%;position: relative;transform-origin: 0 0;overflow: hidden;}

总结

以上就是今天要讲的方法，简介明了~希望可以帮到你~

transform:scale实现大屏自适应相关推荐

【前端大屏实战1】Vue+Echarts -- 大屏简介初体验 =＞大屏自适应缩放解决方案 =＞使用transform:scale =＞组件化抽离ScaleBox=＞【两分钟实现大屏宽高等比例】
如果累了就冬眠吧,如果睡不着,就接纳暂时的失眠,不强迫自己入睡. 目录一.大屏简介 1.数据可视化 2.大屏用途 3.大屏效果展示二.大屏需求分类 1.固定尺寸的"真实"大屏 ...
大屏自适应方案之scale
大屏自适应之前有用过postcss-pxtorem之类的插件,但是插件只针对css样式,在js和vue模板中的样式,还有echarts的属性值都不能经过插件直接转换.要手动分装方法再次调用,就会比较麻 ...
vue项目：大屏自适应解决方案（两种）
css缩放方案: 利用transform:scale 进行适配推荐使用v-scale-screen 值得注意的是: vue 2.6.2.7 要使用 npm install v-scale-scree ...
vue数据大屏自适应屏幕分辨率js
vue数据大屏自适应屏幕分辨率js 最近在写vue数据大屏的时候想到屏幕分辨率要自适应问题,按照设计图的百分比写感觉太麻烦,宽高甚至字体大小都要用百分比,就在想有没有其他的方案能实现,相信都用过rem ...
大屏自适应等展示问题
一.大屏界面自适应问题因为一开始就用的简单的宽度百分比,高度固定的布局,设计稿1920*1080,所以在非全屏下有些错乱,到笔记本上看更加错乱.后续重新写布局大小工作量太大,所以采用了监听浏览器可视 ...
vue尺寸的自适应大屏自适应
我在一些大屏的项目中,碰见自己电脑写好的样式,但是在大屏中出现了变形. 通过 postcss-px2rem 插件,实现项目的自适应使用: ** 1.安装包** npm install postcss ...
css 网页自适应方案大屏自适应方案
自适应需要解决的问题屏幕像素大小不同,统一表现画面比例不同,统一表现浏览器字体最小限制,不可能无限等比缩小自适应不成功的表现: 4. 画面出现拉伸压缩 5. 文字内容显示异常 6. 画面出现空 ...
大屏自适应文章收藏分享
Vue 大屏开发自适应 VScode | flexible.js | rem | echarts自适配 - 秦浩铖 - 博客园
可视化大屏自适应效果
通过transform的缩放效果让真实宽高和现实的浏览器窗口大小进行等比例缩放 1.HTML :style="{width: windowWidth+'px',height:windowH ...

transform:scale实现大屏自适应

前言

1.在src文件下的utils文件夹里新建fixer.js文件(名字自定义)

2.主页面引入js文件

总结

transform:scale实现大屏自适应相关推荐

最新文章

热门文章