モバイルファースト戦略における CSS の書き方_html/css_WEB-ITnose

モバイル インターネット時代において、レスポンシブ サイトを開発する方法は、すべてのフロントエンド スタッフにとって必須のスキルです。通常、モバイル開発における優れた設計の重要性は認識されていますが、コード レベルで議論されることはほとんどありません。

次に、次のことを考えてみましょう:

1. モバイルファースト戦略 (スモールスクリーンファースト戦略) とは何ですか?

2. このスタイルの書き方戦略。

モバイル ファースト戦略 VS デスクトップ ファースト戦略

モバイル ファースト戦略: デザインと開発はモバイルデバイスに適応することを主な目的として行われ、可能な限りデスクトップの大画面に適応します。

デスクトップ優先戦略: デスクトップ デバイスを第一の考慮事項とし、モバイル デバイスを二次的な位置に置きます

これは第一の考慮事項であり、第二の考慮事項です。

モバイルファースト戦略に基づいてスタイルを作成する場合、メディアクエリを使用してデスクトップの大画面デバイス (min-width など) に適応させることができます。

例:

// このアプリは 0px から 600px までです

body {

背景: 赤; >

// 600px 以降のアプリです

@media (min-width: 600px) {

body {

背景: 緑;

}

}

ここでは、本文の幅が600px未満の場合は背景色が赤、600pxを超える場合は背景色が緑になります。

デスクトップファースト戦略では、次のような CSS を記述する必要があります:

// このアプリは 600px 以降です

body {

背景: green ;

}

// このアプリは 0px から 600px までです

@media (最大幅: 600px) {

body {

背景: 赤;

}

}

モバイルファースト戦略を採用する理由

小さな画面と比較して、大きな画面に適応させるために CSS コードは通常より複雑になるため、モバイルファースト戦略は、コード。

次のシナリオを考えてみましょう:

サイトのコンテンツはモバイルで 100%、デスクトップで 60% を占めます。

現時点では、小さな画面の場合、属性のデフォルト値を使用して、div などのコンテンツ領域にスタイルを追加できます。デフォルトでは、ブロックレベル要素のデフォルトの幅は次のとおりです。 100%。

小さい画面優先戦略での Sass コード:

.content {

// 小さい画面用のプロパティ

// デフォルトのスタイルを使用できるため、ここでは何も必要ありません

// 大きな画面用のプロパティ
@media (min-width: 800px) {
float: left;
width: 60%;
}

大画面優先戦略の下:

.content {

// 大きな画面用のプロパティ。

float: left;

width: 60%;

// 小さい画面用のプロパティ

// レイアウトを機能させるには、2 つのデフォルトのプロパティを記述する必要があることに注意してください。
@media (max-width: 800px) {
float: none; 🎜> width: 100%;
}

}

これで 2 行のコードが節約され、精神的な消費がいくらか減りました。大規模なプロジェクトでは、より大きなメリットが得られます。

モバイルファースト戦略の下で Max-width をどのように使用しますか

スタイルの適用対象を特定のビューポート幅に制限したい場合、max-width が便利です。 min-width を使用すると便利で、制限された間隔を作成することもできます。

サムネイル表示ページのレイアウトを考えてみましょう。ビューポートの幅が 800px 未満の場合は 3 列で表示され、それ以外の場合は 4 列で表示されます

間の場合これらのサムネイル ギャップがない場合は非常に簡単です:

.gallery__item {

float: left;

width: 33.33%;

@media (min-width: 800px) {

width: 25 %;

}

}

実際の状況では、通常ギャップがあり、状況は複雑になります:

それは簡単です。次の CSS を考えてください:

.gallery__item {

浮動小数点: 左;
幅: 30.333%;
マージン-右 5%;
マージン-下: 5%;
&:nth-child(3n) {
マージン-right: 0;
}

@media (min-width: 800px) {
width: 21.25% // (100% - 15%) / 4
&:nth -child (4n) {
margin-right: 0;
}
}

}

ただし、3 つおきの項目に margin-right を設定しているため、は 0 であり、連続して 4 つの項目がある場合、4 番目の各項目は 0 である必要があります。次のように解決策を書き直すことを検討できます。

.gallery__item {
// .. .
@media ( min-width: 800px) {
// ...
&:nth-child (3n) {//3 番目の項目の間隔を復元します
margin-right: 5 %;
&:nth-child(4n) {
margin-right: 0%;
}
}

}

これは良い意味ではありませんが、より大きな画面にさらに多くの項目を表示する必要がある場合にも、同じ問題に遭遇するからです。

次の方法を検討してください。ビューポートで変更されるものを対応するクエリ ステートメントに含めます。デフォルトのスタイルは公開部分のみを保持するため、書き換えによるトラブルを軽減できます。 {

float: left;

margin-right: 5%;

margin-bottom: 5%;
@media (max-width: 800px) {
width: 30.333%;
&:nth-child(3n) {
margin-right: 0;
} }
}

@media (min-width: 800px) {
width: 21.25 %; // (100% - 15%) / 4
&:nth-child (4n) {
margin-right: 0;
}
}

}

参考: http://zellwk.com/blog/how-to-write-mobile-first-css/