CSS 画面サイズ適応実装例

CSS 画面サイズの適応を実現するには、まず CSS3 @media メディアクエリを導入する必要があります。

メディアの使用とルール:

①リンク先の文書はどのデバイスに表示されますか？

②メディアタイプごとに異なるスタイルを指定するために使用されます。

文法：

@メディアデバイス名のみ（選択条件）ではなく（選択条件）かつ（デバイス選択条件）、デバイス 2 {sRules}

例:

/* これは水平画面状態に一致させるための CSS コードです */

@media すべておよび (方向: 横向き){}

/* これは垂直画面状態に一致させるための CSS コードです */

@media すべておよび (方向:縦向き){}

@media X および (min-width:200px){}
/*X はメディア タイプです ---> print/screen/TV など。*/

/* 幅が 600px より大きく 960px より小さい場合は、フッター構造を非表示にします */

@media すべてかつ (最小高さ:640px) かつ (最大高さ:960px) {
      フッター{display:none;}
}

実際のアプリケーションでは、まず HTML ヘッダーファイル <head> に次のコードを追加する必要があります。

<meta name="viewport" content="width=デバイス幅、初期スケール=1.0、最大スケール=1.0、ユーザースケーラブル=いいえ">

説明する：

幅 = デバイス幅: 幅は現在のデバイスの幅に等しい

initial-scale: 初期スケール（デフォルト設定は 1.0）

minimum-scale: ユーザーがズームできる最小スケール（デフォルト設定は 1.0）

最大スケール: ユーザーがズームできる最大スケール (デフォルト設定は 1.0)

user-scalable: ユーザーが手動でズームインおよびズームアウトできるかどうか (ユーザーがページをズームインおよびズームアウトできないようにするため、デフォルト設定は「いいえ」です)

メディアの種類はたくさんあるので、初心者向けチュートリアルの該当リンクはこちらです: https://www.jb51.net/css/103906.html

メディア画面の種類は次のとおりです（コンピュータ画面、タブレット、スマートフォンなど）。

CSS 適応型画面サイズ方式:

@media screen かつ (最小幅: 320px) かつ (最大幅: 1156px) {

              .site-bg-dl {
              位置: 固定;
              高さ: 100%;
              幅: 100%;
              zインデックス: 0;
              背景画像: url(bjxzfwzx/images/bj1.png);
              背景サイズ: カバー;
              背景繰り返し: 繰り返しなし;
              背景添付: 固定;
              背景サイズ:100% 100%;
              背景サイズを100%から100%に変更します。
            }
}

説明する：

画面が 320 ピクセルより大きく 1156 ピクセルより小さい場合にブラウザにこのコードを実行するように指示します。

さまざまな画面の表示スタイルをカスタマイズするには、CSS に次のコンテンツを追加します。

/* 大画面: 1200px 以上*/
@media (最小幅: 1200px) { ... }

/*デフォルト*/
@media (最小幅: 980px) {...}

/* タブレットと小型画面のコンピュータ間の解像度*/
@media (最小幅: 768px) および (最大幅: 979px) { ... }

/* 横置きの携帯電話と縦置きのタブレットの解像度*/
@media (最大幅: 767px) { ... }

/* 横置きの携帯電話や解像度の小さいデバイス*/
@media (最大幅: 480px) { ... }

CSS 画面サイズ適応の実装例に関するこの記事はこれで終わりです。より関連性の高い CSS 画面適応コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: モバイルブラウザのビューポートパラメータ (Web フロントエンドデザイン)

>>: jsはFileReaderを使用してローカルファイルまたはBLOBを読み取ります