Question

我想在CSS中学习媒体查询和更多内容。截至目前，我想要一个固定的侧边栏，不会向下滚动内容。

另外，我之前一直在阅读有关媒体查询的内容..但是还是无法理解它们......也许一个样本会给我提示......

这是我的代码..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.wrapper {
    width: 1024px;
    margin: 0 auto;
}
.content {
    background-color: #CCC;
    width: 700px;
    float: left;
}
.sidebar {
    float: right;
    height: 500px;
    width: 300px;
    padding: 10px;
    background-color: #666;
}
</style>
</head>

<body>
<div class="wrapper">
  <div class="content">
    <div class="post">
      <h1>Header</h1>
      <p>This is a excerpt or a content</p>
    </div>
    <div class="post">
      <h1>Header</h1>
      <p>This is a excerpt or a content</p>
    </div>
    <div class="post">
      <h1>Header</h1>
      <p>This is a excerpt or a content</p>
    </div>
    <div class="post">
      <h1>Header</h1>
      <p>This is a excerpt or a content</p>
    </div>
    <div class="post">
      <h1>Header</h1>
      <p>This is a excerpt or a content</p>
    </div>
    <div class="post">
      <h1>Header</h1>
      <p>This is a excerpt or a content</p>
    </div>
    <div class="post">
      <h1>Header</h1>
      <p>This is a excerpt or a content</p>
    </div>
    <div class="post">
      <h1>Header</h1>
      <p>This is a excerpt or a content</p>
    </div>
    <div class="post">
      <h1>Header</h1>
      <p>This is a excerpt or a content</p>
    </div>
    <div class="post">
      <h1>Header</h1>
      <p>This is a excerpt or a content</p>
    </div>
    <div class="post">
      <h1>Header</h1>
      <p>This is a excerpt or a content</p>
    </div>
    <div class="post">
      <h1>Header</h1>
      <p>This is a excerpt or a content</p>
    </div>
  </div>
  <div class="sidebar"></div>
</div>
</body>
</html>

为了缩短它，我只是想模仿这个site ..只是为了测试我的技能。它看起来很简单......

正如您所看到的，如果您调整浏览器窗口的大小，菜单会发生变化，那是否有某种jQuery效果？如果是，我在哪里可以找到该教程..

Answer 1

媒体查询： http://css-tricks.com/css-media-queries/

对于滚动条，你有点自己说..把它定位：固定; left：with-of-the-wrapper; 并从侧边栏中取出包装div。

的Gr。凯文

Answer 2

当屏幕宽度低于特定尺寸时，您可以隐藏侧边栏div：

@media all and (max-width: 720px) {
  #sidebar {
    display:none;
  }
}

或者您可以向左浮动它将显示在页面底部：

@media all and (max-width: 720px) {
      #sidebar {
        float:left;
      }
   }

您可能需要稍微调整一下CSS以及您希望媒体查询运行的最大宽度。

修改 - 在移动设备上调整菜单

最简单的解决方案是使用网格框架。

主要有两个：

如果您访问他们的网站并调整窗口大小，您将看到菜单根据屏幕大小而变化。调查代码，看看他们是如何做到的，这将有助于您理解它。显然也阅读了所有的教程。

这是一个从头开始实施它的教程http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/a-simple-responsive-mobile-first-navigation/

固定边栏位置和响应

2 个答案: