41

CSS3メディアクエリをWebサイトに実装する方法はたくさんあるので、経験豊富なWebデザイナーが推奨する方法を知りたいと思います。私はカップルを考えることができます：

1.オールインワンスタイルシート

すべての画面幅に適用されるデフォルトのスタイルと、より低い画面幅にのみ適用され、デフォルトを上書きするメディアクエリがすべて1つのファイルにあります。例えば：

HTML

<link rel="stylesheet" href="main.css">

main.css

article
{
    width: 1000px;    
}

@media only screen and (max-width: 1000px)
{
    article
    {
        width: 700px;
    }

}

（これは単なる例であることに注意してください）

長所：

  • デフォルトのスタイルは古いブラウザに適用されます
  • 必要なHTTPリクエストは1つだけです

短所：

  • たくさんのコードで面倒になります
  • 一部のブラウザは、適用されないコードをダウンロードする必要があります

2.個別のスタイルシート

画面幅ごとに調整された完全なコードを含む個別のスタイルシートがあります。ブラウザは、該当するもののみをロードします。例えば：

HTML

<link rel="stylesheet" href="large-screen.css" media="screen and (min-width: 1001px)"> /*Also older browsers*/
<link rel="stylesheet" href="small-screen.css" media="only screen and (max-width: 1000px)">

large-screen.css

article
{
    width: 1000px;
}

small-screen.css

article
{
    width: 700px;
}

長所：

  • きちんと整理された
  • 必要なHTTPリクエストは1つだけです
  • ブラウザは必要なものだけをロードします

短所：

  • （これが私がこれを使用することを躊躇する理由です:)すべての画面幅に適用される変更を行う場合、変更をコピーしてすべてのスタイルシートの適切な場所に貼り付ける必要があります。

3.個別のスタイルシート、1つのグローバルスタイルシート

＃1と同じですが、グローバルスタイルとメディアクエリは別々のスタイルシートにあります。例えば：

HTML

<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="small-screen.css" media="only screen and (max-width: 1300px)">

main.css

article
{
    width: 1000px;
}

small-screen.css

article
{
    width: 700px;
}

長所：

  • また、きちんと管理しやすい
  • グローバルな変更を行う場合、＃2の問題はありません
  • グローバルスタイルは古いブラウザに適用されます

短所：

  • 画面幅が小さい場合は、2つのHTTPリクエストが必要です

それが私が考えることができるすべてです。メディアクエリはどのように管理する必要がありますか？

ご回答ありがとうございます。

4

3 に答える 3

29

確かに、私はこの問題の権威であると主張することはできませんが (私はまだコーディング規則について自分自身で学んでいます)、実際にはオプション #1 - 単一のスタイルシートに傾倒しています。ただし、具体的な実装を考えています。新しいスタイルが必要な画面サイズのケースごとに 1 つのブレーク ポイントを設定する代わりに、複数のブレーク ポイントを用意することをお勧めします。複数の画面サイズに対処する必要がある各モジュールの CSS スタイルに 1 つです。

ああ…ちょっと紛らわしい発言だったかもしれません。例は順番に...

次のようなものではなく:

/*default styles:*/
/*header styles*/
.header-link{  ...  }
.header-link:active{  ...  }
.header-image{  ...  }
.header-image-shown{  ...  }
.header-table-cell{  ...  }

/*content styles*/
.content-link{  ...  }
.content-link:active{  ...  }
.content-image{  ...  }
.content-image-shown{  ...  }
.content-table-cell{  ...  }

/*footer styles*/
.footer-link{  ...  }
.footer-link:active{  ...  }
.footer-image{  ...  }
.footer-image-shown{  ...  }
.footer-table-cell{  ...  }

/*alternate styles for smaller screens:*/
@media only screen and (max-width: 1000px){
    /*header styles*/
    .header-link{  ...  }
    .header-image{  ...  }
    .header-image-shown{  ...  }
    .header-table-cell{  ...  }

    /*content styles*/
    .content-link{  ...  }
    .content-image{  ...  }
    .content-image-shown{  ...  }
    .content-table-cell{  ...  }

    /*footer styles*/
    .footer-link{  ...  }
    .footer-image{  ...  }
    .footer-image-shown{  ...  }
    .footer-table-cell{  ...  }
}

次のように実装されたオプション＃1をお勧めします。

/*default header styles*/
.header-link{  ...  }
.header-link:active{  ...  }
.header-image{  ...  }
.header-image-shown{  ...  }
.header-table-cell{  ...  }

/*alternate header styles for smaller screens*/
@media only screen and (max-width: 1000px){
    .header-link{  ...  }
    .header-image{  ...  }
    .header-image-shown{  ...  }
    .header-table-cell{  ...  }
}

/*default content styles*/
.content-link{  ...  }
.content-link:active{  ...  }
.content-image{  ...  }
.content-image-shown{  ...  }
.content-table-cell{  ...  }

/*alternate content styles for smaller screens*/
@media only screen and (max-width: 1000px){
    .content-link{  ...  }
    .content-image{  ...  }
    .content-image-shown{  ...  }
    .content-table-cell{  ...  }
}

/*default footer styles*/
.footer-link{  ...  }
.footer-link:active{  ...  }
.footer-image{  ...  }
.footer-image-shown{  ...  }
.footer-table-cell{  ...  }

/*alternate footer styles for smaller screens*/
@media only screen and (max-width: 1000px){
    .footer-link{  ...  }
    .footer-image{  ...  }
    .footer-image-shown{  ...  }
    .footer-table-cell{  ...  }
}

(すべてのクラスはプレースホルダーです。私はあまりクリエイティブではありません...)

これは、同じメディア クエリの宣言を複数回行うことを意味しますが (コードが少し増えます)、単一のモジュールをテストする場合にははるかに便利であり、サイトが大きくなるにつれてサイトの保守性が全体的に向上します。複数の実際のスタイル、より多くのタグ/クラス/ID を私が示した例に追加してみてください。おそらくそれらにもう少し空白を追加すると、スタイルを絞り込んで変更/追加する方がはるかに速いことがすぐにわかりますすべての画面サイズ) の例の 2 番目の部分で示されている実装で。

そして、この回答は、Jonathan Snook によるScalable and Modular Architecture for CSSからの情報に完全に基づいていると思います。(結局のところ、私のような初心者が自分でそのような答えを見つけて推論できる方法はありません!) その本の多くの関連部分の 1 つから引用したように、

「... メインの CSS ファイルまたは別のメディア クエリ スタイル シートに単一のブレーク ポイントを設ける代わりに、モジュールの状態の周りにメディア クエリを配置します。」

ただし、個人的な好みなどにより、このアプローチを使用したくない場合は、提案した他のオプションを自由に使用できます。結局のところ、スヌーク自身は、彼の本は「厳格なフレームワークよりもスタイルガイドに近い」と述べています。 "なので、これがコーディング標準であるとは思わないでください。（そうあるべきだと思いますが。XD）

于 2012-07-25T16:17:59.660 に答える