1. メディアからのお問い合わせ
メディア クエリを使用すると、さまざまな端末デバイスでページにさまざまな効果を実現できます。
メディア クエリは、デバイスのサイズに基づいてさまざまなスタイルを自動的に識別して読み込みます。
メタタグを設定する
デバイスの幅をビューの幅として使用し、初期スケーリングを無効にします。<head>このメタ タグをタグに含めます。
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
パラメータの説明
width = device-width幅は現在のデバイスの幅と同じですinitial-scale初期スケール係数 (デフォルトでは 1.0 に設定)maximum-scaleユーザーがズームできる最大比率 (デフォルトは 1.0)user-scalableユーザーが手動でズームできるかどうか (デフォルトはいいえ)
さまざまなページサイズに応じてさまざまなページ効果を実現します
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
background-color: greenyellow;
}
@media screen and (max-width:768px) {
body{
background-color: pink;
}
}
@media screen and (min-width:768px) and (max-width:992px){
body{
background-color: orange;
}
}
@media screen and (min-width:992px) {
body{
background-color: green;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>2. レスポンシブレイアウト
レスポンシブ デザインに関して言えば、メディア クエリ メディアは切っても切れない関係にあります。
レスポンシブ レイアウトは、画面解像度の異なる端末で Web ページを閲覧するための異なる表示方法を実現することを目的としています。
レスポンシブ レイアウトの長所と短所
アドバンテージ
- さまざまな解像度のデバイスに対応する高い柔軟性
- マルチデバイスのディスプレイ適応問題を迅速に解決できます
欠点がある
- さまざまなデバイスに対応、負荷が高く効率が低い
- コードが煩雑で、隠し要素や無駄な要素が出現し、ロード時間が長くなります。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.nav{