CSS3で適切なレスポンシブルデザインを構築する「正しい」論理的な方法は何ですか？

Question

私は「レスポンシブル・デザイン」に飛び込み、これがどのように機能するかを公正に理解しています。しかし、私は頭を抱くために特に必要な2つのことがあります。

私の思考の「論理的」な方法は、このようなものです：画面サイズが320ピクセル未満の場合、これで問題があることで、画面サイズが行う480PX未満はB.

@media only screen and (max-width: 320px) { Do one thing here} 
@media only screen and (max-width: 480px) { Do another thing here} 

であれば、やります画面の幅が未満320

ある場合max-width: 480pxで、CSSにも影響を受けている私は例を見てみると、私は彼らのようなものを使用している参照してください。

@media only screen and (min-width: 290px) {} 
@media only screen and (min-width: 544px) {} 
@media only screen and (min-width: 960px) {} 

これは基本的に言いますつまり画面が290pxより大きい場合はこれを行い、画面が544pxより大きい場合はそれを行います。しかし、私はここでも同じ問題を抱えています。 min-width: 290pxのコードは、290ピクセルを超えるすべての画面サイズでも使用されます。

だから私はそのことを考えることができる唯一の解決策は、特定の画面の範囲で動作しますが、これを使用している：

@media only screen and (max-width: 320px) {} 
@media only screen and (min-width: 321px), 
only screen and (max-width: 480px){} 
@media only screen and (min-width: 640px), 
only screen and (max-width: 481px){} 

誰もがこの上で私をアドバイスすることはできますか？

例を見ると、私は冗長コードの略奪を見ます。同じコードの多くは、単に異なる値を持つ、繰り返される：

@media only screen and (max-width : 930px), 
only screen and (max-device-width : 930px){ 
    nav li a { 
     width: 25%; 
     border-bottom: 1px solid #fff; 
     font: 400 11px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif; 
    } 

    nav li:last-child a, nav li:nth-child(4) a { border-right: none; } 
    nav li:nth-child(5) a { border-bottom: none; } 
} 

@media only screen and (max-width : 580px), 
only screen and (max-device-width : 580px){ 
    nav li a { 
     width: 50%; 
     font: 400 12px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif; 
     padding-top: 12px; 
     padding-bottom: 12px; 
    } 

    nav li:nth-child(even) a { border-right: none; } 
    nav li:nth-child(5) a { border-bottom: 1px solid #fff; } 
} 

大規模なサイトの場合、私はちょうどこれは、コードと大きなCSSファイルの多くを作成することを想像することができます。

レスポンシブデザインで作業する必要があるため、これが新しい標準になりますか？

次の操作を行うためのオプションだろう？：

@media only screen and (min-width: 640px) { @import url("css/640.css");} 

Answer 1

まず、必要以上にコードを書く/参照しています。例えば

：

@media only screen and (min-width: 321px), 
only screen and (max-width: 480px) { 

のように書くこともできます。たとえば背景で、メディアクエリ内の

@media only screen and (min-width: 321px) and (max-width: 480px) { 

あなたは決して繰り返してはならないCSS、任意の画面サイズ用に設定されているものcolorまたはfont-familyは、メディアクエリの外に設定する必要があります。これは一度だけ書かれ、それらすべてに適用されることを意味します。各メディアクエリ内には、その特定のサイズにのみ影響を与えるコードが必要です。 （幅、フォントサイズなど）

CSSファイルなどをインポートすることをお勧めしません。グローバルスタイルを一番上に入れて、その下にメディアクエリ内の画面サイズのスタイルを指定してくださいそれ。大規模なCSSファイルでは延期しないでください.1つの10kbファイルを10個の1KBファイルよりも簡単にダウンロードできます。

hereを示すサンプル.cssファイルを作成しました。これは恐ろしいサイトを作成することに注意してください。レイアウトコードと場所の表示方法を示しています。

上記の例では、メディアクエリのブラウザサポートを前提としています。それがなければ、その場所はそのお尻に落ちるでしょう。メディアクエリのサポートが100％保証されておらず、Respond.JSを使用していない場合は、デスクトップサイトをグローバルスタイルにすることをお勧めします。サポートしていないブラウザのフォールバックを保証するために不要に上書きしてください。

Answer 2

あなたが書いたことはかなりそれを行う方法です。しかし、BoltClockのように、レスポンシブウェブサイトを作る方法はたくさんあります。

また、 'double' cssを避けるために、メインのCSSファイルを作成することもできます。スクリーンショットに関係なく、ウェブサイト全体で変更する必要のないものは、このファイルに入ります。 （あなたのフォントなど）。あなたのcssファイルは、実際にどのくらい遠くにレスポンシブにしたいのかによって「巨大」になるでしょう。

これが新しい基準になるのかどうか質問に答えるために...モバイルフレンドリーなウェブサイトをサポートするかどうかは、ウェブサイトの所有者によって異なります。

私はこれが少し助けてほしかった:)幸運！