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

Question

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

该网站是：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

你可以尝试使用溢出-X：隐藏;在<正文>上简单地隐藏滚动条。但是，您将无法轻松看到视图端口外的内容。

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

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