1

私にとってHTML+CSSは非常に複雑です。HTML+ CSS+@media悪夢です。今、私のHTML+CCSはスパゲッティのように見えます。Plsは質問で私を助けます：

  1. インクルードをどのように整理する必要がありますかSCSS: 機能別 (ヘッダー/フッター) またはディメンション別 (0_480)?
  2. @media 制限の使用方法:
    • 最大幅のみ: 0 ～ 420、0 ～ 870、制限なし
    • 最小幅 + 最大幅: 0-420、421-870、871+
    • 最小幅のみ: 870+、420+、0+
4

6 に答える 6

1

適応性のためのサイトをテストするには、簡単かつ迅速にすることができます! http://plastilin5.com/tools/

于 2012-09-29T20:04:10.403 に答える
0

最大幅と最小幅の使用方法について@media、一部の開発者は「モバイルファースト」を強く主張します。たとえば、最初に小さな画面のスタイルに焦点を当て、次に大きな画面のスタイルをオーバーライドします。

これは、「最大幅のみ：0-420、0-870、制限なし」オプションと最もよく一致すると思います。

于 2012-09-27T13:15:13.403 に答える
0

これが良い例です（サイトの下部をチェックしてください）

http://m.alistapart.com/articles/responsive-web-design/

すべてのスタイルシートのインポートをヘッダーに配置できます。

于 2012-09-27T12:59:00.070 に答える
0
  1. これが私がすることです：
    • 最大サイズのみのCSSを書く
    • CSS ファイルの最後に (プロジェクトが大きすぎる場合は @import として)、「@media screen and (max-width: 1700px)」を追加し、その解像度のすべての変更を書き込みます。
    • 必要な解像度ごとに前の手順を繰り返します

これが最善のアプローチであると私が考える主な理由は、小さな画面では、一部の要素を表示しないように決定できる (そしておそらくそうするでしょう) ことです。それらが隠される最初の（最大の）解像度のそれらの要素に。逆に CSS を作成している場合は、要素の追加が少し難しくなります。

于 2012-09-27T13:07:46.827 に答える
0

Sass には「メディア クエリ バブリング」と呼ばれるものがあります。これは、メディア クエリがどのネスト レベルに配置されていても、上部にバブリングすることを意味します。責任を持って使用していない場合、これは良いことでもあり悪いことでもあります (メディア クエリを関連するスタイルでグループ化できるのは良いことですが、過度に使用すると、何百ものメディア クエリがいたるところにあるので悪いことです)。 .

私のワークフローで機能することがわかったのは、メディアクエリを可能な限りグループ化して、その対象となるコンテンツのブロックにすることです。スタイルの各主要ブロックは独自のファイル (マスター レイアウト、イメージ ギャラリー、クライアントなど) に分割され、各ファイルのメディア クエリの数は可能な限り少なくなります (通常、より複雑な場合は 1 つまたは 2 つ、3 つまたはそれ以上)。ブロック）。

$x-small-device: 25em; // smallest
$small-device: 35em; // larger mobile
$medium-device: 55em; // tablet or really small desktop

.clients {
    // no matter what resolution, these styles are always applied

    @media (min-width: $small-device) {
        // have our clients display in a 2-col layout
    }

    @media (min-width: $medium-device) {
        // have our clients display in a 3-col layout
    }
}

対象となるデバイスの幅に基づいて分割しようとすると、スタイルを変更するときにスタイルがどこにあるかを見つけるのが難しくなります。

于 2012-09-27T14:28:14.053 に答える