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

Question

我正在玩媒体查询，并开始为移动屏幕开发。我的第一页相对而言是我喜欢的，但是当我将屏幕大小调整为 <480 像素时，我在底部看到一个水平滚动条。我还没有在移动设备上对此进行测试，但我假设会出现相同的错误。

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

要重新创建错误，请打开网站，将窗口大小调整为 <480 像素并垂直滚动到底部

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; 在

上简单地隐藏滚动条。但是，您将无法轻松查看视口之外的内容。

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

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

或者您可以使用<元>元素：

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