1

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

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

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

4

2 回答 2

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>
于 2012-08-08T12:40:49.000 回答
0

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

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

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

或者你可以使用 <meta> 元素：

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

于 2012-08-08T12:05:26.463 回答