ここの記事は重要な詳細を提供します。
モバイルファーストとは？
コーディングの観点から見たモバイル ファーストとは、基本スタイルが通常、1 列の完全に流動的なレイアウトであることを意味します。その上にグリッドベースのレイアウトを追加するには、 @media (最小幅: 何でも) を使用します。
別の方法 (デスクトップが最初) では、幅の広いグリッドベースのレイアウトから始めて、@media (最大幅: 任意) を使用して 1 列のレイアウトに縮小します。
なぜモバイルファーストなのですか？
iPhone および Android ブラウザーは非常に優れた機能を備えていますが、古いスマートフォン、フィーチャー フォン、およびゲーム コンソールなどのその他の小さな画面のデバイスは、メディア クエリをサポートしていない場合があります。
古い、性能の低い多機能携帯電話の大画面レイアウトで小さなテキストを読み取ろうとすることを想像してみてください。
モバイル ファーストの Web デザインは、プログレッシブ エンハンスメントをサイト レイアウトに拡張し、シンプルで読みやすいコンテンツをすべてのデバイスに提供し、構造とプレゼンテーションをより機能的なデバイスに重ねることができます。
最新の Dreamweaver 6 Fluid Layout の Mobile First の例を以下に示します-
/* Mobile Layout: 480px and below. NOTE: No Media Query line here*/
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 87.36%;
padding-left: 1.82%;
padding-right: 1.82%;
}
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout.*/
/* NOTE: Now from here media query lines are added for Tablets and Desktop */
@media only screen and (min-width: 481px) {
.gridContainer {
width: 90.675%;
padding-left: 1.1625%;
padding-right: 1.1625%;
}
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
}
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
.gridContainer {
width: 88.2%;
max-width: 1232px;
padding-left: 0.9%;
padding-right: 0.9%;
margin: auto;
}
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
}
それが役に立てば幸い。
編集：上記の例をもう少し詳しく説明する別の記事はこちらです。以下のように抜粋 -
プログレッシブ クエリ
一部の古いモバイル デバイスはメディア クエリをまったくサポートしていない可能性があるため、クエリ内に小さなバージョンの CSS ルールを詰め込むと、クエリ内でレンダリングできる CSS を認識できなくなる場合があります。これよりも小さいバージョンを「デフォルト」にし、メディア クエリを介して大きな画面用の追加の CSS ルールを追加することをお勧めします (デスクトップ ブラウザーはメディア クエリを認識する可能性が高いため)。
IE および古いブラウザのサポート
