水平滚动条问题与媒体查询

Question

我正在玩媒体查询并开始开发移动屏幕。我的第一页相对于我想要的方式，但是当我将屏幕调整为＆lt; 480px时，我在底部得到一个水平滚动条。我还没有在移动设备上测试过这个，但我假设会出现同样的错误。

该网站是：http://brad.sebdengroup.com/newOdynSite/index.php

要重新创建错误，请打开网站，将窗口调整为＆lt; 480px并垂直滚动到底部

Answer 1

问题在于：

#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>

Answer 2

您可以尝试使用overflow-x：hidden;在＆lt; body＆gt;上简单地隐藏滚动条。但是，您将无法轻松查看视口外的内容。

对于移动设备，您可以使用媒体查询来指定样式表：

<link rel="stylesheet" href="styles/mobile.css" media="only screen and (max-device-width: 480px)">

或者您可以使用＆lt; meta＆gt;元素：

<meta name="viewport" content="width=device-width, user-scalable=no">