max-width 比 width: 100% 更适合博客内容区，因其可限制最大宽度防阅读疲劳、配合 margin: auto 实现居中，且 max-width: 68ch 基于字符宽度保障每行60–75字符的可读性最佳实践。
为什么 max-width 比 width: 100% 更适合博客内容区
博客正文如果只写 width: 100%，在大屏上会无限拉宽，段落过长导致阅读疲劳；小屏又可能因父容器未设限而溢出。真正可控的响应式宽度靠的是 max-width + margin: auto 组合。
-
max-width: 68ch是更语义化的选择——ch单位基于字符“0”的宽度，能保证每行约60–75个字符，符合可读性最佳实践 - 避免用固定像素值如
max-width: 768px：它和设备无关，但在高DPI屏或缩放后容易错位 - 必须配合
margin: 0 auto才能居中；仅设max-width不会自动居中
如何让图片在所有设备上不破布局、不失真
博客里插图最常触发横向滚动条，根本原因是没切断图片的“原始尺寸惯性”。不是加个 width: 100% 就完事。
- 给所有文章内图片统一加
img { max-width: 100%; height: auto; }——height: auto必须写，否则等比缩放失效 - 如果用了
Object-fit（比如头图），注意object-fit: cover会裁剪，contain会留白，博客封面图通常选前者，正文配图建议后者 - 不要对
img直接设width: 100vw：它会超出容器，尤其在有 padding 的卡片里
字体大小响应式不是靠媒体查询堆出来的
用一堆 @media (min-width: ...) 控制 font-size 看似精细，实则难维护、易断层。现代博客更依赖流体字号（fluid typography）。
- 核心是
clamp(1.125rem, 4vw, 1.5rem)：最小值保小屏可读，最大值防大屏撑开，中间用视口单位平滑过渡 - 别在
body上直接 clamp 所有文字——标题、正文、代码块需求不同，应分层设置，比如h1用clamp(1.75rem, 5vw, 2.5rem)，p用更保守的范围 - 注意 safari 旧版本对
clamp()支持不全，若需兼容 ios 13 以下，得加降级：font-size: 1.25rem; font-size: clamp(...);
prefers-reduced-motion 不只是“动画开关”，它影响布局稳定性
用户开启“减少运动”后，不仅动画要停，某些靠 transform 或 opacity 实现的交互效果（比如侧边栏淡入、目录锚点平滑滚动）可能直接卡住或错位。
立即学习“前端免费学习笔记（深入）”；
- 用
@media (prefers-reduced-motion: reduce)关闭scroll-behavior: smooth，否则部分 chrome 版本会报错并阻止跳转 - 避免用
transform: translateY()做“隐藏菜单”，它在 reduced motion 下可能让元素脱离文档流；改用visibility: hidden+height: 0更稳妥 - 检查是否在 js 中监听了
scroll并做了节流，因为 reduced motion 模式下滚动事件频率可能异常，导致布局抖动
响应式不是把屏幕尺寸列成表格再挨个适配，而是理解每个 css 属性在不同上下文中的行为边界。最常被忽略的，是那些没报错、但悄悄破坏阅读节奏的细节——比如行宽超 80 字符，或者图片在 ipad Pro 上突然变模糊。