网站不能适应较小的屏幕尺寸

Question

我会在这里删除一些代码，但我认为最好只给你一个URL。发生了什么事情是网站调整到各种屏幕尺寸，然后我在CSS和HTML上进行了一些调整，现在却没有。我今天花了很多时间试图解决这个问题。这让我很生气。

以下是链接：http://lcc.outervenue.com

看看并告诉我我做出的愚蠢的事情来解决这个问题。

提前致谢...

Answer 1

确定。毕竟，我发现了这个问题。让这成为一个教训＆＃34;有时它是最简单的事情＆＃34;。

失踪＆＃34 ;;＆＃34;在CSS文件中。见下文：

#menu {
    display: table-row
    width: 100%;
    height: 50px;
}

Answer 2

我认为您正在努力使网站具有响应能力但尚不熟悉此概念。

您可以通过添加媒体查询来开始改进CSS，例如：

@media all and (max-width: 720px) {
  #outermost{
    width:600px;
  }
}

当浏览器窗口宽度小于或等于720px时，它指示浏览器调整div的宽度，使用id #outermost到600px。

建议的方法是使用定义良好的响应式CSS框架（如Bootstrap）在页面上使用更好的网格系统。

在此处阅读有关Bootstrap网格的更多信息：http://getbootstrap.com/css/#grid

Answer 3

我认为菜单也没有响应。

您需要更改类“#header”和“#menu”的某些CSS属性。对于这两个类，尝试将“display：table-row”属性替换为“display：block”。

Answer 4

css中的

将宽度设置为100％ width: 100%;