如何让CSS绘制的图形在所有屏幕尺寸下都固定正常显示？

核心原因 #

你绘制的图形出现缩放错乱，本质是绘图容器和内部元素使用了相对动态单位、或者受文档流挤压没有固定尺寸约束导致的，按以下方案调整即可：

方案1：完全固定尺寸（图形大小不随屏幕变化） #

给所有绘图元素的外层包裹容器做固定尺寸约束：

• 容器宽高用px单位定义，同时设置min/max宽高和基础宽高完全一致，避免容器被窗口缩放挤压
• 容器设置position: relative，内部绘图元素全部相对这个容器定位
• 全局统一设置box-sizing: border-box，避免边框、内边距撑大元素尺寸
  示例代码：

* {
  box-sizing: border-box;
}
.graph-wrapper {
  width: 600px; /* 替换为你绘制的图形实际宽度 */
  height: 400px; /* 替换为你绘制的图形实际高度 */
  min-width: 600px;
  min-height: 400px;
  max-width: 600px;
  max-height: 400px;
  position: relative;
  margin: 0 auto; /* 可选，需要居中展示时添加 */
  overflow: hidden; /* 可选，避免内部元素超出容器 */
}
/* 内部所有绘图区块用绝对定位+px单位定义位置和尺寸 */
.graph-item {
  position: absolute;
  top: 50px;
  left: 100px;
  width: 80px;
  height: 80px;
  background: #333;
}

方案2：等比自适应尺寸（图形大小随屏幕变化但不变形） #

如果需要图形适配不同屏幕尺寸同时保持比例不变，用固定宽高比方案：

• 外层容器设置aspect-ratio属性，值和你绘制的图形宽高比完全一致
• 内部绘图元素的定位、尺寸全部用百分比单位定义，相对外层容器计算
  示例代码：

.graph-wrapper {
  aspect-ratio: 3/2; /* 替换为你的图形实际宽高比 */
  width: 90%;
  max-width: 1000px; /* 可选，限制最大展示尺寸 */
  min-width: 320px; /* 可选，限制最小展示尺寸 */
  position: relative;
  margin: 0 auto;
}
.graph-item {
  position: absolute;
  top: 10%;
  left: 15%;
  width: 20%;
  height: 20%;
  background: #333;
}

注意事项 #

• 绘图时不要用float、普通流margin这类容易受上下文影响的布局方式，优先用绝对定位
• 不要混合使用不同类型的单位定义图形的尺寸和定位，要么全用px要么全用百分比
• 避免用vw/vh/em/rem这类相对单位做图形的定位和尺寸定义，除非你刻意要让图形跟随视口或者字体大小变化

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