web-dev-qa-db-ja.com

CSS3メディアクエリはどのように管理する必要がありますか？

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

1.すべてが1つのスタイルシートに

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

[〜＃〜] html [〜＃〜]

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

main.css

article
{
    width: 1000px;    
}

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

}

（これは単なる例であることを覚えておいてください）

長所：

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

短所：

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

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;
}

長所：

  • きちんと整理された
  • 1つの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リクエストが必要です

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

ご返信ありがとうございます。

cssstylesheetmedia-queries
37
LonelyWebCrawler

まあ、確かに私はその問題の権威であると主張することはできません（私はまだコーディング規約について自分で学んでいます）が、実際にはオプション＃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によるCSS用のスケーラブルでモジュール式のアーキテクチャからの情報に完全に信用しています。 （結局のところ、私のような初心者が自分でそのような答えを理解して推論できる方法はありません！）その本の多くの関連する部分の1つから引用したように、

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

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

28
Serlite

私は「あなたが期待するところにコードを置く」ことを信じています。スタイルのオーバーライドが必要な場合、オーバーライドするコードをデフォルトのスタイルと同じように、つまり同じドキュメントにする必要があります。そうすれば、1年後も、コードを見ると何が起こっているのかがわかります。他のアプローチ（ブレークポイントごとに別のcssファイル）では、別のファイルでスタイルコードを上書きすることを忘れないでください。 １年後のことを忘れない限り、問題ありません。それは個人的な好みであり、ブラウザは気にしません。

3
Jorix

2番目のオプションを使用する場合は、モバイル版とデスクトップ版の両方のサイトに必要なグローバルスタイルを "コピー+貼り付け"しないようにする方法があります。 SASSを使用しています。

あなたはそのようなものを持つことができます：

> CSS Folder
> Sass folder
 - _global.scss
 - _mobile_layout.scss
 - _desktop_layout.scss
 - main_mobile.scss
 - main_desktop.scss

コンパイルされます

> CSS Folder
 - main_mobile.css
 - main_desktop.css

お役に立てば幸いです^^

1
legnaleama