モバイル ファーストのレスポンシブ デザインに注目するもう 1 つの要因は、ほとんどの人がモバイル デバイス経由でインターネットにアクセスしていることです (60%)。一方、デスクトップでインターネットを使用している人はわずか 20% です。
この記事では、モバイルファーストのレスポンシブデザインを作成する手順について説明します。
モバイルファーストのレスポンシブデザインを設定するにはどうすればよいですか?
レスポンシブ デザインは、モバイル ファースト レスポンシブであっても、大画面向けであっても、以下の方法で作成できます。
方法 1: モバイル ファーストのレスポンシブ デザインを作成する
まず、モバイルファーストのデザインアプローチを作成することから始めます。そのためには、以下に示す段階的な手順に従ってください。
ステップ 1: HTML 構造を作成する
まず、HTML 構造を作成し、「 ブートストラップ ' の中に <頭> セクション。 HTML セクションへのスタイルシートの追加について学習するには、これをクリックしてください。 リンク 。以下を含む基本的な Web サイト構造を作成した後、 <なし> 、 <ヘッダー> そして <フッター> 以下に示すとおり:
< 体 ><ヘッダー>
<なし>
< ウル >
< それ >< ある href = 「#」 > 家 < / ある >< / それ >
< それ >< ある href = 「#」 > 私たちについて < / ある >< / それ >
< それ >< ある href = 「#」 > 私たちのサービス < / ある >< / それ >
< それ >< ある href = 「＃」 > お問い合わせ < / ある >< / それ >
< / ウル >
< / いや＞
< / ヘッダー>
<メイン>
<セクション>
< h1 > Linux ヒントへようこそ < / h1 >
< p > チュートリアル Web サイト。 < / p >
< / セクション>
< / メイン>
<フッター>
< p > Linux ヒントの著作権 < / p >
< / フッター>
< / 体 >
ステップ 2: CSS を適用する
本文セクションで、「」を設定します。 フォントファミリー ' に ' サンセリフ ”。パディング、マージン、背景色も設定します。その後、ヘッダー、フッター、ナビゲーションに CSS を適用します。
体 {フォントファミリー : サンセリフ ;
マージン : 0 ;
パディング : 0 ;
背景色 : #808080 ;
}
ヘッダ {
背景色 : 紫 ;
色 : 白 ;
パディング : 8ピクセル ;
}
ナビウル {
リストスタイルタイプ : なし ;
パディング : 0 ;
マージン : 0 ;
}
彼らの船 {
マージン : 4ピクセル 0 ;
}
ナビウルリア {
色 : 白 ;
テキスト装飾 : なし ;
}
主要 {
パディング : 18ピクセル ;
}
フッター {
背景色 : ピンク ;
色 : 白 ;
テキスト整列 : 中心 ;
パディング : 8ピクセル ;
}
ご覧のとおり、以下の出力は、デザインがモバイルファースト対応であることを確認しています。
方法 2: メディア クエリを使用して大画面用のレスポンシブ デザインを作成する
上記のデザインは、タブレットやデスクトップなどの大きな画面用に作成することもできます。そのためには、ユーザーは CSS にメディア クエリを含める必要があります。タブレットの幅は「 786ピクセル ”、デスクトップの場合は” 1024ピクセル ”。
メディア クエリを適用するには、まず「 @メディア CSSファイル内に「」タグを追加します。その後、「min-width」プロパティを「 768ピクセル ”。これは、最小画面サイズ「768px」以上が満たされるたびに、次の CSS が適用されることを意味します。
@メディア ( 最小幅 : 768ピクセル ) {体 {
フォントサイズ : 14ピクセル ;
}
ヘッダ {
パディング : 18ピクセル ;
}
ナビウル {
画面 : フレックス ;
}
彼らの船 {
マージン : 0 8ピクセル ;
}
主要 {
画面 : フレックス ;
コンテンツの正当化 : 間のスペース ;
アイテムの整列 : 中心 ;
}
フッター {
パディング : 18ピクセル ;
}
}
以下の出力は、デザインが大きな画面でも応答することを示しています。
結論
モバイルファーストのレスポンシブデザインを設定するには、まず HTML 構造を作成し、ビューポートを追加します。その後、headタグ内にCSSファイルをリンクします。次に、モバイルファーストのレスポンシブデザインに基づいて CSS を適用します。さらに、ユーザーは CSS メディア クエリを追加してモバイル デバイス上で調整できます。この記事では、モバイルファーストのレスポンシブデザインを設定するための詳細な手順を説明しました。