@media レスポンシブ CSS を使用してさまざまな画面に適応する例

定義と使用

@media クエリを使用すると、さまざまなメディアタイプに異なるスタイルを定義できます。

@media は、さまざまな画面サイズに合わせてさまざまなスタイルを設定できます。特に、レスポンシブなページデザインを設定する必要がある場合、@media は非常に便利です。

ブラウザのサイズを変更すると、ページはブラウザの幅と高さに応じて再レンダリングされます。

PCデバイス画面の幅

ページ幅が1000px以上(>=1000)、1200px未満(<=1200)の場合、以下のCSSが実行されます(実際には、正確に">=1000"または"<=1200"のときに実行されます)

@media screen かつ (最小幅:1000px) かつ (最大幅: 1200px) {
    .cont_li{
        幅: 50px;
        左マージン: 7px;
        左パディング: 9px;
    }
}

以下の順番に注意してください。@media (min-width: 768px) を一番下に置くと悲惨なことになります。

@media (最小幅: 1200) { //> = 1200 デバイス}
@media (最小幅: 992px) { //> = 992 台のデバイス}
@media (最小幅: 768px) { //> = 768 台のデバイス}

これは、画面の幅が 1440 の場合、1440 > 768 であるため、1200 は無効になるためです。

したがって、min-width を使用する場合、小さい方が前面に、大きい方が背面に配置されます。同様に、max-width を使用する場合、大きい方が前面に、小さい方が背面に配置されます。

@media (最小幅: 768px) { //> = 768 台のデバイス}
@media (最小幅: 992px) { //> = 992 台のデバイス}
@media (最小幅: 1200) { //> = 1200 デバイス}

@media (最大幅: 1199){ //<=1199 デバイス}
@media (最大幅: 991px){ //<=991 デバイス}
@media (最大幅: 767px){ //<=768 デバイス}

PC画面適応型CSS3コード:

/* ページ幅が 1000px より大きく 1200px 未満の場合に実行されます (1000-1200) */
@media screen かつ (最小幅:1000px) かつ (最大幅: 1200px) {
    体{
        フォントサイズ:16px
    }
}
/*ページ幅が1280pxより大きく1366px未満の場合に実行、1280-1366*/
@media screen かつ (最小幅:1280px) かつ (最大幅: 1366px) {
    体{
        フォントサイズ:18px
    }
}
/*ページ幅が1440px以上1600px未満の場合に実行、1440-1600*/
@media スクリーンと (最小幅:1440px) と (最大幅:1600px) {
    体{
        フォントサイズ:20px
    }
}
/*ページ幅が1680px以上1920px未満の場合に実行、1680-1920*/
@media スクリーンと (最小幅:1680px) と (最大幅:1920px) {
    体{
        フォントサイズ:22px
    }
}

コンピュータ画面サイズの例の表には、1024、1200、1280、1366、1440、1600、1680、1920 という幅が示されています。

モバイルデバイスの画面の幅

rem (ルート要素のフォントサイズ) は、ルート要素に対するフォントサイズの単位を示します。簡単に言えば、相対的な単位です。 rem を見ると、間違いなく em 単位を思い浮かべるでしょう。em (要素のフォントサイズ) は、親要素に対するフォントサイズの単位を指します。実際には、計算ルールの 1 つはルート要素に依存し、もう 1 つは親要素に依存する点を除けば、これらは非常によく似ています。

まとめると、いわゆるルート要素依存の計算方法では、まず HTML 要素にフォントサイズを指定し、次にすべての rem がこのフォントサイズに基づいて計算されます。次に例を示します。

html{ フォントサイズ:16px;}

したがって、ここでの 1rem は次のように計算されます: 1x16=16px=1rem;

モバイルフォント:

@media スクリーンと (最小幅: 320px) {html{フォントサイズ:50px;}}
@media スクリーンと (最小幅: 360px) {html{フォントサイズ:56.25px;}}
@media スクリーンと (最小幅: 375px) {html{フォントサイズ:58.59375px;}}
@media スクリーンと (最小幅: 400px) {html{フォントサイズ:62.5px;}}
@media 画面と (最小幅: 414px) {html{フォントサイズ:64.6875px;}}
@media スクリーンと (最小幅: 440px) {html{フォントサイズ:68.75px;}}
@media スクリーンと (最小幅: 480px) {html{フォントサイズ:75px;}}
@media スクリーンと (最小幅: 520px) {html{フォントサイズ:81.25px;}}
@media スクリーンと (最小幅: 560px) {html{フォントサイズ:87.5px;}}
@media スクリーンと (最小幅: 600px) {html{フォントサイズ:93.75px;}}
@media スクリーンと (最小幅: 640px) {html{フォントサイズ:100px;}}
@media 画面と (最小幅: 680px) {html{フォントサイズ:106.25px;}}
@media スクリーンと (最小幅: 720px) {html{フォントサイズ:112.5px;}}
@media スクリーンと (最小幅: 760px) {html{フォントサイズ:118.75px;}}
@media スクリーンと (最小幅: 800px) {html{フォントサイズ:125px;}}
@media スクリーンと (最小幅: 960px) {html{フォントサイズ:150px;}}

モバイル画面適応型 CSS3 コード:

@media screen および (最小幅:320px) および (最大幅:360px) {
    体{
        フォントサイズ: 12px;
    }
}
@media スクリーンと (最小幅:360px) と (最大幅:390px) {
    体{
        フォントサイズ: 13px;
    }
}
@media スクリーンと (最小幅:390px) と (最大幅:460px) {
    体{
        フォントサイズ: 14px;
    }
}

@media スクリーンと (最小幅:320px) と (最大幅:460px) {
    体{
        フォントサイズ: 12.5px;
    }
}

@media レスポンシブ CSS を使用してさまざまな画面に適応する方法の例についての記事はこれで終わりです。@media レスポンシブ画面適応に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: VUE 応答性原理の詳細な説明

>>: Tomcat マルチインスタンスの展開と構成の原則