这是什么
CSS（控制页面外观的样式代码）可以用固定单位（比如像素，例如一个被设置为精确 800 像素宽的方框）或相对、灵活的单位（比如百分比，能根据页面被查看的任何屏幕自动调整）来设置元素大小。「固定宽度元素」是指页面上任何用这类固定像素值而非灵活值来设置大小的部分——图片、表格、容器方框等。
只要屏幕比那个固定值宽，这就没问题，但一旦实际屏幕（尤其是手机）比元素的固定宽度窄，浏览器就别无选择，只能让页面横向滚动以容纳它，因为它无法把一个元素缩小到低于其明确设定的尺寸。
为什么重要
横向滚动是移动布局损坏最刺眼、最不容置疑的标志之一，因为它迫使访客同时朝两个方向滚动才能正常阅读——这与每位移动访客在其他地方都期待的上下滚动，完全是一种不同、更令人沮丧的浏览方式。通常只需要页面上任何地方有一个尺寸过大的元素（一张宽图片、一个嵌入的表格、一个固定宽度的方框），就足以让这种行为影响到整个页面，而不仅仅是那个元素周围。
这常常是为桌面端优先设计的内容遗留下来的产物——比如一个从电子表格复制过来的表格，或一张按原始、未压缩像素尺寸插入的图片——而不是整体网站设计中的根本缺陷。
如何解决
- 在手机（或窄浏览器窗口）上打开你的网站，检查整个页面是否横向滚动，或者找出它开始出现的具体位置。
- 找到导致溢出的具体元素——通常是一张宽图片、一个嵌入的表格，或者一个在样式中明确设置了像素宽度的方框。
- 把固定像素宽度替换成百分比这样的相对单位，或者添加一条
max-width: 100%规则，让元素永远不会超过屏幕的实际宽度。 - 对于宽表格，考虑把它们包裹在一个仅限于那一个表格的可滚动容器中，而不是让整个页面横向滚动。
- 每次修改后都在手机上重新检查，确认横向滚动已经消失。