CSS 画面サイズ適応実装例

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を読み取ります

推薦する

MySQL ユーザー権限管理の実装

1. MySQL の権限の概要MySQL には、権限を制御する 4 つのテーブルがあります。user...

Linux で iostat コマンドを使用するチュートリアル

序文運用・保守を行う人がスキルを持っていなければ、サーバーを操作するのに恥ずかしさを感じてしまうと言...

ハイパーリンクを使用してリンクファイルを開く HTML 方式の紹介

a および href 属性 HTML では、英語ではアンカーと呼ばれるハイパーリンクを表すために &...

Reactの簡単な紹介

目次1. CDNの紹介1.1 react (最初にインポート) 1.2 react-dom(後ほど紹...

ネイティブJSで様々なモーションの複合モーションを実現

この記事では、ネイティブ JS で実装された複合モーションを紹介します。複合モーションとは、異なる属...

MySQL並列レプリケーションの簡単な説明

1. 並列レプリケーションの背景まず、並列レプリケーションの概念はなぜ存在するのでしょうか? 1. ...

DockerでPrometheusをインストールする詳細なチュートリアル

目次1. Node Exporterをインストールする2. cAdvisorをインストールする3. ...

Linux システムでの nginx サーバーのインストールと負荷分散構成の詳細な説明

nginx (エンジン x) は、高性能な HTTP およびリバース プロキシ サーバー、メール プ...

テキスト ファイルの並べ替えに役立つ Awk コマンドラインまたはスクリプト (推奨)

Awk は、ソートを含む他の一般的なユーティリティによって実行できるいくつかのタスクを実行できる強...

HTML フォーム タグの使用方法を学ぶチュートリアル

HTML のフォームを使用して、ユーザーからさまざまな種類の入力情報を収集できます。フォームは、実際...

ウェブサイト開発におけるフロントエンド開発者とアーティストの知識の違い

概要: 多くの企業、特にインターネット Web サイトを主な事業とする企業のほとんどが、「アーティス...

nginx+uwsgi で Django プロジェクトを開始するための詳細な手順

Django で Web プロジェクトを開発する場合、開発およびテストのプロセスでは Django ...

HTMLでのラジオ値の取得、割り当て、登録の詳細な説明

1. ラジオのグループ化名前が同じであれば、それらはグループであり、つまり、次のようにグループ内で選...

レスポンシブウェブデザインを実現するためにIEでCSS3メディアクエリをサポートする

今日の画面解像度は、320 ピクセル (iPhone) ほど小さいものから、2560 ピクセル以上 ...

MySQLの左結合と内部結合について簡単に説明します

序文最近、X 省のコールド チェーン トレーサビリティ システムの開発で忙しくしています。毎日午後 ...