采用语义类名如.main-content、CSS自定义属性定义宽度变量、结合Grid/Flexbox布局，用max-width与clamp()实现响应式，按内容类型构建结构化容器，提升可维护性与可读性。
在现代网页开发中，固定宽度布局虽然简单易实现，但已逐渐被更灵活、语义化更强的方案取代。直接使用width: 960px这类写法缺乏语义，不利于响应式设计和可维护性。以下是几种更具语义化的替代方式。
使用语义类名代替纯尺寸命名
避免使用如.container-960这样仅描述尺寸的类名，改用表达用途的语义类名。
这些类名说明了元素的作用，而不是它的尺寸，让HTML结构更清晰。
结合CSS自定义属性提升可维护性
通过CSS变量定义常用宽度，在多个组件中复用，同时保持语义清晰。
立即学习“前端免费学习笔记（深入）”；
:root {
--content-width: 1200px;
--narrow-width: 800px;
}
.main-content {
width: var(--content-width);
margin: 0 auto;
padding: 0 1rem;
}
这样修改全局布局时只需调整变量值，无需逐个查找像素值。
使用现代布局技术替代固定宽度
CSS Grid 和 Flexbox 能以更语义化的方式控制布局结构。
- 用
max-width限制内容区最大宽度，同时允许在小屏幕上自动收缩 - 使用
grid-template-columns: 1fr min(65ch, 100%) 1fr居中主体内容，65ch是理想阅读长度 - 借助
clamp()实现弹性但有限制的宽度：width: clamp(320px, 80%, 1200px)
这种方式兼顾可读性、响应式和语义表达。
为不同内容类型定义结构化容器
根据内容意义划分区块，而非统一套用固定宽度容器。
-
文章页：适合较窄宽度（如
max-width: 65rem）提升阅读体验 - 仪表盘：可用全宽栅格布局，按功能区域划分
- 媒体展示：允许突破常规宽度，增强视觉表现力
每种容器在CSS中独立定义，HTML中通过语义类名调用。
基本上就这些。语义化不只是标签的选择，更是整体结构思维的体现。用意图驱动样式，让宽度成为设计逻辑的结果，而不是起点。
