#最近培训演示环境编译过程中的思考。一个在 1920×1080 显示器上看起来刚刚好的网页，接上 1366×768 屏幕或会议室投影仪后，往往会暴露出字体过大、布局下沉、内容溢出等问题------真正的自适应，远不只是把文字"居中"。#
做普通网页时，我很少专门考虑投影仪。但在制作现场演示程序以后，我发现一个非常现实的问题：开发电脑上看起来非常漂亮的页面，接上会议室投影以后，可能瞬间"变形"。比如：标题换行、按钮掉出屏幕、底部说明看不到、1920×1080 下恰到好处的留白，在 1366×768 下却显得过大。更麻烦的是，有些现场电脑还会开启：125%、150%、Windows 显示缩放。
所以一个看似简单的宣传页，真正要做到现场稳定展示，远不只是：text-align: center;那么简单。
一、我最开始犯的错误：大量使用固定像素
例如标题：
.title {
font-size: 72px;
margin-top: 160px;
}
在：1920×1080下很好看。换成：1366×768后就明显变大。如果页面高度更低，甚至可能把副标题和按钮一起向下挤。
问题出在：72px、160px都是绝对值，屏幕变了，它们不会变。
二、字体大小不要只写一个 px
后来我开始使用：clamp() 例如：
.title {
font-size: clamp(32px, 4.5vw, 72px);
}
这个表达式可以理解为：字体最小------32px；理想大小------4.5vw；最大------72px。vw 表示浏览器宽度的百分比。
因此屏幕变小时，标题会跟着缩小。但又不会无限缩小。这比：font-size: 5vw;更加安全。副标题可以写：
.subtitle {
font-size: clamp(18px, 2vw, 32px);
}
【图1：1920×1080 下页面截图】
【图2：1366×768 下同一页面截图】
三、真正的垂直居中，我更愿意交给 Flex
过去做居中，我可能写：margin-top: 180px;然后不断调整。现在做宣传页、启动页和演示首页，我更喜欢：
.hero {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
其中：
justify-content: center;负责纵向居中。
align-items: center;负责横向居中。
这样页面高度变化以后，内容仍然围绕屏幕中心布局，而不是死死地距离顶部：180px
四、但真正的宣传页通常不能"数学意义绝对居中"
有意思的是：真正做完以后，我又发现视觉居中和数学居中不是同一个概念 。
假设页面中间有：
主标题
副标题
说明文字
按钮
如果整个内容块严格放在屏幕正中心，人眼往往会感觉略微偏低。尤其是下方还有状态栏或者操作提示时更明显。所以我会加一点视觉补偿：
.hero-content {
transform: translateY(-3vh);
}
也就是整体稍微上移。这不是严格意义上的几何居中，却往往看起来更舒服。UI 设计很多时候就是这样：代码负责精确，最终判断仍然要交给人的视觉。
五、1366×768 是一个非常值得专门测试的分辨率
现在很多开发人员使用：1920×1080、2K（4K）显示器。但会议室、培训室和旧笔记本中：1366×768仍然非常常见。如果一个页面只在开发机上测试，很容易出现：开发电脑非常漂亮、现场投影一塌糊涂。
因此我会专门写一个媒体查询：
@media (max-height: 800px) {
.hero {
padding-top: 20px;
padding-bottom: 20px;
}
.title {
margin-bottom: 12px;
}
.subtitle {
margin-bottom: 18px;
}
}
这里没有只判断宽度，而是判断：高度。因为宣传页、全屏页往往比普通信息网页更加受屏幕高度影响。
六、再处理窄屏
如果浏览器窗口被缩窄，例如演示时没有全屏，标题可能需要换行。
可以：
.hero-content {
width: min(92vw, 1200px);
}
标题：
.title {
line-height: 1.15;
word-break: keep-all;
}
如果中文标题本身比较长，可以在 HTML 中主动设计合理的换行位置，而不是完全交给浏览器随机折行。例如：
<h1>
网络安全为人民，网络安全靠人民
<span>------智能时代 网安护航</span>
</h1>
然后：
.title span {
display: block;
}
这样：
主标题
副标题式第二行的层次就比较稳定。
七、不要忘记 Windows 显示缩放
这是现场演示非常容易忽略的问题。Windows 电脑可能设置为：
100%
125%
150%
同样一个页面，在高 DPI 环境中的实际视觉效果可能不同。所以我现在测试一个演示程序，至少会看：
1920×1080 / 100%
1920×1080 / 125%
1366×768 / 100%
窄窗口
如果条件允许，再连接真实投影仪跑一次。
八、全屏演示页面还要避免滚动条
现场程序的首页如果突然出现右侧滚动条，观感会很差。可以：
html,
body {
margin: 0;
min-height: 100%;
}
body {
overflow-x: hidden;
}
但我一般不建议粗暴使用：overflow: hidden;因为一旦内容在某些极端分辨率下真的超出，用户甚至没有办法滚动查看。更好的方法还是从布局本身解决：
字体自适应
边距自适应
内容高度控制
响应式媒体查询
九、我现在做现场演示页面的测试清单
页面完成以后，我通常会按下面几项检查。
-
1920×1080 看整体比例和大屏视觉效果。
-
1366×768 ，重点看：标题、按钮、底部提示、是否超出。
-
窄窗口 。检查：标题换行、按钮排列、左右边距。
-
Windows 125% 缩放 。观察字体和控件是否异常放大。
-
浏览器 F11 全屏 。检查进入全屏以后布局是否改变。
-
真实投影 。最终确认色彩、文字大小和可视距离。
这里最后一项非常重要。
模拟器和开发者工具永远无法完全代替实际投影环境。
十、一段可以复用的基础 CSS
最终，我会把宣传页的基础结构控制在比较简单的范围。
html,
body {
margin: 0;
width: 100%;
min-height: 100%;
}
body {
font-family:
"Microsoft YaHei",
"PingFang SC",
sans-serif;
}
.hero {
min-height: 100vh;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(20px, 4vw, 64px);
}
.hero-content {
width: min(92vw, 1200px);
text-align: center;
transform: translateY(-3vh);
}
.title {
margin: 0;
font-size:
clamp(32px, 4.5vw, 72px);
line-height: 1.15;
}
.subtitle {
margin-top:
clamp(12px, 2vh, 24px);
font-size:
clamp(18px, 2vw, 32px);
line-height: 1.5;
}
@media (max-height: 800px) {
.hero-content {
transform: translateY(-1vh);
}
}
它并不复杂。实际上一个稳定的演示页，也不应该靠几十条媒体查询硬凑出来。
写在最后
做完这次适配以后，我重新理解了"响应式网页"。
以前我认为响应式主要解决：PC、平板、手机三种设备。但现场演示程序让我发现，同样是 Windows PC，也可能存在：
1920×1080
1366×768
浏览器窗口
投影设备
Windows DPI 缩放
等完全不同的显示环境。
真正好的自适应，并不是在每种分辨率下都做到像素完全一致。而是无论屏幕怎么变化，都要保证：层次不乱、内容完整、重点突出、操作可见。
对于网页来说，这是响应式设计。对于现场演示程序来说，这其实也是一种可靠性设计。