コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > JS は応答性を高めるためのシンプルなコードを実装します。

JS は応答性を高めるためのシンプルなコードを実装します。

PHPz
リリース： 2017-04-03 15:33:38
オリジナル
2273 人が閲覧しました

1. 応答性を実装する CSS

CSS 応答性の実装は主に CSS メディア クエリに依存します:

メディア クエリには、オプションのメディア タイプと 0 個以上の式が含まれます。メディア プロパティ 、 ( など) を使用するスタイルシート: 幅、高さ、色。 CSS3 のメディア クエリを使用すると、コンテンツ自体を変更することなく、特定の範囲の出力デバイスに対してのみコンテンツをレンダリングできます。つまり、メディア クエリを通じて画面の幅を決定し、さまざまな CSSスタイル シート

をロードします。 コードは次のとおりです。 メディア クエリのないデフォルトのスタイル シートが存在する必要があることに注意してください。そうでない場合は、スタイル シートが存在しないことになります。 IE8でアクセスしました。 

<head>

　　<meta charset="UTF-8">

　　<title>响应式的演示</title>

　　<link rel="stylesheet" type="text/css" href="css/reset.css" />

　　<link rel="stylesheet" type="text/css" href="css/index1200.css" />

　　<link rel="stylesheet" type="text/css" href="css/index980.css" media="screen and (min-width:980px) and (max-width:1200px)"/>

　　<link rel="stylesheet" type="text/css" href="css/index640.css" media="screen and (min-width:640px) and (max-width:980px)"/>

　　<link rel="stylesheet" type="text/css" href="css/index320.css" media="screen and (max-width:640px)"/>

</head
ログイン後にコピー

2. 応答性を実装するための JS

JS 応答性の実装は、さまざまなデバイスの画面幅を取得し、それらを選択的にロードするために、さまざまな CSS スタイルシートにも依存します 異なる CSSスタイルシート。

りー

以上がJS は応答性を高めるためのシンプルなコードを実装します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
JS，响应式
ソース：php.cn
前の記事：モバイル端末 - 応答性、レム/エム、Js を使用してモバイル端末の適応を動的に実装する 次の記事：js を使用してレスポンシブなサイドバーの例を作成する
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
クエリと式は、新しい列を含むテーブル全体を形成します。新しい列は、他の条件列の値を含む式です。 編集: 式は「値」列、つま​​りカテゴリに基づいて最も低い user_id を持つ「値」列である必要があります。カテゴリ「A」の最も低い「user_id」の「value」列が 0....
から 2024-04-06 21:23:40
0
2
530
Javafx でインライン CSS スタイルを動的に変更する アプリケーションが最大化されているときにペインの背景画像を変更しようとしています。私の背景はインライン CSS を使用して設定されています。スタイル用に 2 つの異なる変数と if...
から 2024-04-06 20:57:16
0
1
487
MySQL: 「<ここの変数またはサブクエリ> として...からテキストを選択します」 次のデータを含む次のテーブルがあります: id text language 1 german text german 2 english text english 私が望むのは、次...
から 2024-04-06 19:25:54
0
2
529
Web アプリケーションでバージョン情報を表示するためのベスト プラクティスは何ですか? Webアプリケーションを開発しています。 Web アプリケーションでバージョン情報を表示するためのベスト プラクティスは何ですか?私はセマンティック バージョニングを使用しており、...
から 2024-04-06 19:13:16
0
2
476
CSS スタイルがサイトに適用されない Bootstrap5を使用してWebサイトを作成していますが、index.cssプロパティがindex.htmlに適用されません。サービス カードの上にマウスを移動すると、背景が変...
から 2024-04-06 17:12:23
0
1
336
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート