如何根据屏幕尺寸自适应调整.page类div适配小屏显示

我在开发一款Canva轻量版页面编辑器，项目中.page类对应的页面div为A4尺寸，固定高度1277px。该元素在大屏设备上显示正常，但小屏设备下显示效果异常，效果参考截图：

我目前尝试的适配代码如下：

.page {
  transform: perspective(100vh) translateZ(calc(100vh - 1300px));
  transform-origin: center top;
}

该方案可以实现基础适配，但存在三个问题：

• 渲染后的页面存在模糊问题
• 需要给.page元素保留max-height: 1277px的高度限制
• 3D变换写法在旧版浏览器中兼容性较差

放弃3D透视变换的适配思路——这类3D变换会触发浏览器单独的栅格化渲染层，非常容易出现文字、边缘发虚模糊的问题，同时兼容性差。直接使用2D缩放配合少量JS动态计算缩放比，是编辑器类场景最稳定的适配方案，完全满足需求：

1. 首先写.page的基础样式，保留固定尺寸和高度限制

/* 包裹.page的父容器样式 */
.page-wrapper {
  width: 100%;
  padding: 0 16px;
  box-sizing: border-box;
}

.page {
  /* A4尺寸对应宽高，比例严格匹配标准A4 */
  width: 902px;
  height: 1277px;
  max-height: 1277px;
  /* 缩放原点固定在顶部居中，和原有设置保持一致 */
  transform-origin: top center;
  margin: 0 auto;
  background: #fff;
  /* 编辑器画布常规阴影，可选 */
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

2. 编写动态缩放逻辑，监听窗口变化实时调整

const pageWrapper = document.querySelector('.page-wrapper')
const page = document.querySelector('.page')
// 固定基准尺寸，和CSS中.page的宽高保持一致
const BASE_WIDTH = 902
const BASE_HEIGHT = 1277

function updatePageScale() {
  // 计算父容器当前可用宽度，预留左右内边距
  const availableWidth = pageWrapper.clientWidth - 32
  // 大屏可用宽度大于基准宽度时，不缩放，保持原始尺寸
  if (availableWidth >= BASE_WIDTH) {
    page.style.transform = 'scale(1)'
    pageWrapper.style.height = `${BASE_HEIGHT}px`
    return
  }
  // 小屏下按宽度等比计算缩放值
  const scaleRatio = availableWidth / BASE_WIDTH
  page.style.transform = `scale(${scaleRatio})`
  // 同步更新父容器高度，避免缩放后页面下方出现空白断层
  pageWrapper.style.height = `${BASE_HEIGHT * scaleRatio}px`
}

// 初始化执行
updatePageScale()
// 监听窗口尺寸变化、DOM加载完成后重新计算缩放值
window.addEventListener('resize', updatePageScale)
window.addEventListener('DOMContentLoaded', updatePageScale)

方案优势 #

• 2Dscale变换的渲染清晰度远高于3D透视变换，不会出现文字、边缘模糊的问题
• 完全保留.page元素max-height: 1277px的限制，大屏下页面始终保持原始A4尺寸
• 2D缩放兼容性覆盖IE9及以上所有主流浏览器，不存在旧版浏览器兼容问题
• 等比缩放不会破坏页面内部元素的布局比例，是Canva、Figma等主流编辑器通用的画布适配逻辑

注意：不要尝试用vw/vh单位直接给.page设置宽高实现适配，这种写法会导致页面内部所有以px为单位的元素尺寸计算混乱，编辑器场景下固定画布基准尺寸+外层缩放是最稳妥的实现方式。

内容的提问来源于stack exchange，提问作者Aleks Per