我正在研究媒体查询并开始针对移动屏幕进行开发。我有相对我想要的第一页，但是当我将屏幕大小时调整为 <480px 时，底部出现了一个水平滚动条。我尚未在移动设备上对此进行测试，但我假设会出现相同的错误。
站点是:http://brad.sebdengroup.com/newOdynSite/index.php
要重现错误，请打开网站，将窗口大小调整为 <480px 并垂直滚动到底部
最佳答案
问题是:
#main span.bold {
padding: 15px 20px;
...
}
#main span{
width: 100%;
...
}
这种 CSS 规则的组合创建了一个大于页面宽度的元素。宽度 100% 不包括填充、边框或边距使用的任何空间。例如，如果页面宽度为 480px，则元素的宽度将为 20px + 480px + 20px = 520px。
为避免这种情况，请尝试将内容包裹在一个额外的标签中，这样宽度和填充就可以应用于单独的元素，并根据需要调整 CSS。例如:
<span><strong>What have we done?</strong></span>
关于html - 带有媒体查询的水平滚动条问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11860850/