0

i want to learn media queries and a little bit more in CSS. As of now i want a fixed sidebar that doesn't scroll down with the content.

Also, I've been reading about Media Queries earlier.. Just couldn't understand them yet.. Maybe a sample will give me hints...

Here's my code.. 

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

To make it short, I'm just trying to imitate this site.. just to test my skills. It's looks simple...

As you can see, if you resize the browser window the menu changed,, Is that some kind of jQuery effect? If yes, where can i find a tutorial of that..

4

2 回答 2

1

当屏幕宽度低于特定尺寸时，您可以隐藏侧边栏 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/

于 2013-08-16T12:41:07.177 回答
1

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

对于滚动条，你有点自己说的......让它定位：固定；左：with-of-the-wrapper；并将侧边栏从包装器 div 中取出。

格。凯文

于 2013-08-16T12:31:29.130 回答