0

メディアクエリと、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>

手短に言うと、私はこのサイトを真似ようとしているだけです..ただ自分のスキルをテストするだけです. 見た目はシンプル...

ご覧のとおり、ブラウザ ウィンドウのサイズを変更すると、メニューが変更されました。これは、ある種の jQuery 効果ですか? はいの場合、そのチュートリアルはどこにありますか..

4

2 に答える 2

1

次のように、画面の幅が特定のサイズを下回ると、サイドバーの div を非表示にすることができます。

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

または、ページの下部に表示される左にフロートすることもできます。

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

メディアクエリを実行したい最大幅だけでなく、CSS を少し調整する必要があるかもしれません。

編集 - モバイルでのメニューのサイズ変更

最も簡単な解決策は、Grid Framework を使用することです。

主なものは次の 2 つです。

サイトにアクセスしてウィンドウのサイズを変更すると、画面サイズに応じてメニューが変化することがわかります。コードを調べて、どのように動作するかを確認すると、理解に役立ちます。明らかに、すべてのチュートリアルも読んでください。

これを最初から実装するチュートリアルもあります http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/a-simple-responsive-mobile-first-navigation/

于 2013-08-16T12:41:07.177 に答える