css - ページが狭くなるにつれて、この流動的な列のレイアウトはどのように単一の列に変化しますか?

Question

http://cssgrid.net/が、ブラウザーの幅が一定量を下回ると、レイアウトが 3 列から 1 列に切り替わるという効果をどのように達成するのか説明できますか?

JavaScriptをオフにして、とのCSSを調べてみました.rowが、CSSの.container知識が不足しています。プロパティはありmin-widthますが、Firebug で変更してもあまり影響がないようです。

CSSの何が変更を引き起こしているのか誰か指摘できますか?

Answer 1

メイン CSSの下部にあるメディア クエリです。

/* Smaller screens */

@media only screen and (max-width: 1023px) {
    ...
}

@media handheld, only screen and (max-width: 767px) {
    ...
}

これらはブラウザーのサイズに基づいて異なるルールを適用し、古いブラウザー用のJS クラスによって支援されます。

Answer 2

@ベン; mediaqueriesこれには、幅に応じて css を定義する新しいプロパティを使用する必要があります。このような：

<link rel="stylesheet" href="stylesheets/apx.css" type="text/css" media="screen" title="no title" />
<link rel="stylesheet" href="stylesheets/new-css.css" type="text/css" media="screen and (max-width: 600px)" title="no title" />

上記の例でapx.cssは、これがデフォルトの CSS でありnew-css.css、画面幅が 600px に減少したときに適用されます。

あなたの答えに最適なリンクhttp://css-tricks.com/6206-resolution-specific-stylesheets/

詳細については、これを確認してください http://webdesignerwall.com/tutorials/css3-media-queries