1

これは、テーマがフルサイズの場合です。

ここに画像の説明を入力してください

ここに画像の説明を入力してください

ブラウザのウィンドウが小さくなると、サイドバーが下に移動し、メインコンテンツがレイアウト全体を占めます。

ここに画像の説明を入力してください

私はこれがトリックを行うCSSだと思います：

}
#primary {
    float: left;
    margin: 0 -26.4% 0 0;
    width: 100%;
}
#content {
    border-top: 1px solid #444;
    margin: 0 34% 0 7.6%;
    padding: 20px 0 1.625em;
    width: 58.4%;
}
#secondary {
    float: right;
    margin-right: 7.6%;
    width: 18.8%;
}

（よくわかりません）。

これはテーマのデモです。

サイドバーは、CSSを使用して特定のウィンドウサイズでどのようにスタックダウンするのですか（メインコンテンツがすべてのスペースを占めるようにします）？

4

1 に答える 1

0

これをレスポンシブデザインと呼びます。これを確認してください-coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/。

上記のワードプレスのテーマには、 https://s2.wp.com/wp-content/themes/pub/twentyeleven/style.cssからリンクするファイル style.css があります。このファイルには、サイドバーを特定のウィンドウ サイズでスタックダウンさせるコードがあります。

@media (max-width:800px) {
  [...]
  #main #secondary {
    float:none;
    margin:0 7.6%;
    width:auto;
  }
  [...]
}

@media (max-width:800px) は、サイドバーを指定した画面サイズ以下に自動調整するものです。あなたがそれを手に入れたことを願っています。

于 2013-03-22T14:49:18.760 に答える