let cw = 1920,ch = 1080//默认let body = document.getElementById('body')body.style.width = `${cw}px`body.style.height = `${ch}px`// 对body进行缩放function windowResize() {// 窗口宽高let w = window.innerWidth,h = window.innerHeight// 缩放比例let r = w / cw < h / ch ? w / cw : h / chbody.style.transform = `scale( ${r})`// 因为scale是以body的原中心点为基准进行缩放，所以缩放之后需要调整外边距，使其位于窗口的中心位置body.style.marginLeft = (-(cw - r * cw) / 2 + (w - r * cw) / 2) + 'px'body.style.marginTop = (-(ch - r * ch) / 2 + (h - r * ch) / 2) + 'px'body.style.marginBottom = (-(h > ch ? h : ch - r * ch)) + 'px'body.style.marginRight = (-(w > cw ? w : cw - r * cw)) + 'px'}window.addEventListener("load", windowResize())// 监听窗口尺寸变化window.addEventListener('resize', windowResize);

欢迎使用Markdown编辑器

当开发前端页面在分辨率1920的情况下，需要切换到小屏，有种方法是可以对屏幕比例进行缩放，通过css3属性transform可以自适应屏幕分辨率大小

var s;function resize() {s = window.screen.width / 1920;document.body.style.transformOrigin = '0 0';document.body.style.transform = 'scale(' + s + ',' + s + ')';document.body.style.width = window.innerWidth / s + 'px';document.body.style.height = window.innerHeight / s + 'px';}window.onresize = function () {resize();}resize();

通过计算屏幕分辨率比例，对当前页面进行比例缩放。

但是这会有一个问题，就是如果页面中有定位，缩放后定位的位置会跑偏。那是因为，如果使用定位left，top来固定窗口位置时候，body的大小改变会对它的children的定位产生影响，并且定位的弹框大小没有对应缩放。

发现一个简单的方法

s = window.screen.width / 1920;document.body.style.zoom = s;

这样就可以了

如果觉得《html css 等比例缩放（记录）》对你有帮助，请点赞、收藏，并留下你的观点哦！