ホームページ > 記事 > ウェブフロントエンド > JS は応答性を高めるためのシンプルなコードを実装します。
JS は応答性を高めるためのシンプルなコードを実装します。
- PHPzオリジナル
- 2017-04-03 15:33:382249ブラウズ
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 サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。