让窄屏页面少一点意外横向滚动
桌面浏览器里看起来很整齐的页面，放到手机宽度后，偶尔会多出一条横向滚动条。最初我会直接给页面加 overflow-x: hidden，后来发现它只是把问题藏起来，按钮和文字可能一起被裁掉。
先找撑宽页面的元素
把视口缩到 320 或 375 像素，再看哪个元素的右边缘超过了内容区。常见原因是没有断点的长字符串、固定宽度图片，以及 flex 布局中不愿意缩小的子项。
.content { min-width: 0; }
.article a { overflow-wrap: anywhere; }
.article img { max-width: 100%; height: auto; }
.article pre { overflow-x: auto; }min-width: 0 常用于允许 flex 子项缩小。代码块则不必强行折行，在块内滚动通常比把整页撑宽更容易阅读。文章中的普通长链接可以断行，但不应把同样的规则直接套到所有代码文本上。
间距也算宽度
宽度写成 100% 后再加左右内边距，如果使用默认的 content-box，总宽度就可能超出父元素。统一使用 box-sizing: border-box 可以让宽度包含边框和内边距，但外边距仍然需要单独考虑。
最后我会把系统字号调大再看一次。有些布局在默认字号下刚好放得下，字号一变，导航和按钮就挤在一起。能自然换行的布局，通常比精确计算某个固定宽度更耐用。