带有媒体查询的水平滚动条问题答案

【问题标题】：Horizontal Scroll Bar Issue w/ media queries带有媒体查询的水平滚动条问题
【发布时间】：2012-08-05 08:19:03
【问题描述】：

我正在玩媒体查询并开始为移动屏幕开发。我有相对于我想要的第一页，但是当我将屏幕大小调整为

要重新创建错误打开网站，将窗口大小调整为

【问题讨论】：

【解决方案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>

【讨论】：

【解决方案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">

【讨论】：