7

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

私の「論理的な」考え方は次のようなものです。画面サイズが320px未満の場合は、Aを実行し、画面サイズが480px未満の場合は、Bを実行します。

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

これに伴う問題はmax-width: 480px、画面幅が320未満の場合、cssinも影響を受けることです。

例を見ると、次のようなものを使用していることがわかります。

@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は、290pxを超える画面サイズでも使用されます。

したがって、私が考えることができる唯一の解決策は、特定の画面範囲でのみ機能し、これを使用することです。

@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");}
4

2 に答える 2

5

まず、必要以上のコードを記述/参照しています。

例えば：

@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を繰り返さないでください。たとえば、背景色やフォントファミリなど、任意の画面サイズに設定されているものは、メディアクエリの外部に設定する必要があります。これは、一度だけ書き込まれ、それらすべてに適用されることを意味します。各メディアクエリ内には、その特定のサイズにのみ影響するコードのみを含める必要があります。（例：幅、フォントサイズなど）

cssファイルなどをインポートすることはお勧めしません。すべてを1つにまとめ、上部にグローバルスタイルを配置し、その下のメディアクエリ内に画面サイズ固有のスタイルを配置します。大きなcssファイルに躊躇しないでください。10個の1kbファイルよりも1個の10kbファイルをダウンロードする方が簡単です。

ここに示すために、サンプルの.cssファイルを作成しました。これは恐ろしいサイトを作成することに注意してください。コードをレイアウトする方法と、何がどこに行くのかを示すことだけを目的としています。

上記の例は、ブラウザがメディアクエリをサポートしていることを前提としています。それがなければ、サイトはその窮地に陥るでしょう。メディアクエリのサポートについて100％確信が持てない場合（およびRespond.JSを使用していない場合）、デスクトップサイトをグローバルスタイルにしてから、サポートされていないブラウザーのフォールバックを確実にするために不要なものとして上書きすることをお勧めします。

于 2012-11-23T10:21:26.623 に答える
2

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

また、「double」cssを回避するために、メインのcssファイルを作成することもできます。Webサイト全体で変更する必要のないもの（画面サイズに関係なく）は、このファイルに入ります。（たとえば、フォント）。それに加えて、レスポンシブでどこまで行きたいかに応じて、cssファイルは確かに「巨大」になります。

これが新しい標準になるかどうかあなたの質問に答えるために...彼がモバイルフレンドリーなウェブサイトをサポートしたいかどうか、それはまだウェブサイトの所有者に依存します。

私はこれが少し役立つことを望みました:)頑張ってください！

于 2012-11-23T10:12:37.627 に答える