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を読み取ります
1. MySQL の権限の概要MySQL には、権限を制御する 4 つのテーブルがあります。user...
序文運用・保守を行う人がスキルを持っていなければ、サーバーを操作するのに恥ずかしさを感じてしまうと言...
a および href 属性 HTML では、英語ではアンカーと呼ばれるハイパーリンクを表すために &...
目次1. CDNの紹介1.1 react (最初にインポート) 1.2 react-dom(後ほど紹...
この記事では、ネイティブ JS で実装された複合モーションを紹介します。複合モーションとは、異なる属...
1. 並列レプリケーションの背景まず、並列レプリケーションの概念はなぜ存在するのでしょうか? 1. ...
目次1. Node Exporterをインストールする2. cAdvisorをインストールする3. ...
nginx (エンジン x) は、高性能な HTTP およびリバース プロキシ サーバー、メール プ...
Awk は、ソートを含む他の一般的なユーティリティによって実行できるいくつかのタスクを実行できる強...
HTML のフォームを使用して、ユーザーからさまざまな種類の入力情報を収集できます。フォームは、実際...
概要: 多くの企業、特にインターネット Web サイトを主な事業とする企業のほとんどが、「アーティス...
Django で Web プロジェクトを開発する場合、開発およびテストのプロセスでは Django ...
1. ラジオのグループ化名前が同じであれば、それらはグループであり、つまり、次のようにグループ内で選...
今日の画面解像度は、320 ピクセル (iPhone) ほど小さいものから、2560 ピクセル以上 ...
序文最近、X 省のコールド チェーン トレーサビリティ システムの開発で忙しくしています。毎日午後 ...