一种前端大屏适配方案

前端开发过程中屏幕适配是个常见问题。在前端大屏可视化项目中屏幕适配技术是保障设计稿与实际显示效果一致性的核心技术环节。适配方案目前主要有视口缩放、相对单位、响应式布局等本文主要介绍如何使用 CSS3变换缩放技术实现大屏应用的自适应适配方案。在开发大屏适配过程中有两个尺寸一个是设计稿的尺寸一个是屏幕尺寸我们需要做的就是在不同屏幕尺寸下我们的页面都能够按照原比例全部显示出来。如下图首先我们要想的问题是页面缩放的比例宽度缩放的比例是屏幕宽度/设计稿宽度高度缩放比例是屏幕高度/设计稿高度。有个缩放比例后就把整个页面按照较小的比例缩放就可以了。const scaleX innerWidth / width; // width是设计稿宽度 const scaleY innerHeight / height; // height是设计稿高度 el.style.transform scale(${Math.min(scaleX, scaleY)});但是这时会有小问题页面缩放的中心位置不对我们需要设置一下transformOriginel.style.transformOrigin top left; const scaleX innerWidth / width; const scaleY innerHeight / height; el.style.transform scale(${Math.min(scaleX, scaleY)});到这里大屏适配的基本逻辑已经写好了我们需要封装一个函数然后在屏幕变化时调用该函数进行各种屏幕的适配。function autoScale(selector, options) { const el document.querySelector(selector); const { width, height } options; // 传入设计稿的宽和高 el.style.transformOrigin top left; function init() { const scaleX innerWidth / width; const scaleY innerHeight / height; el.style.transform scale(${Math.min(scaleX, scaleY)}); } init(); addEventListener(resize, init); }这时页面基本可以等比例缩放显示了但是页面内容在屏幕的左上没有居中显示。还需要再优化一下。可以通过移动X和Y的移动来让页面一直显示在中间。注意transform时要先写translate再scale不然会发现不对。function autoScale(selector, options) { const el document.querySelector(selector); const { width, height } options; el.style.transformOrigin top left; function init() { const scaleX innerWidth / width; const scaleY innerHeight / height; const left (innerWidth - width * Math.min(scaleX, scaleY)) / 2; const top (innerHeight - height * Math.min(scaleX, scaleY)) / 2; el.style.transform translate(${left}px, ${top}px) scale(${Math.min(scaleX, scaleY)}); } init(); addEventListener(resize, init); }这时大屏适配方案基本完成为了体验更丝滑还需要再进一步优化因为resize事件是个触发频率比较高的事件所以需要加一个防抖然后会发现每一次resize页面变化得比较生硬所以还要加一个过渡的效果。function autoScale(selector, options) { const el document.querySelector(selector); const { width, height } options; el.style.transformOrigin top left; el.style.transtion transform .5s function init() { const scaleX innerWidth / width; const scaleY innerHeight / height; const left (innerWidth - width * Math.min(scaleX, scaleY)) / 2; const top (innerHeight - height * Math.min(scaleX, scaleY)) / 2; el.style.transform translate(${left}px, ${top}px) scale(${Math.min(scaleX, scaleY)}); } init(); addEventListener(resize, debounce(init));