JS は応答性を高めるためのシンプルなコードを実装します。-jsチュートリアル-php.cn

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

PHPz

リリース： 2017-04-03 15:33:38

オリジナル

2248 人が閲覧しました

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 サイトの他の関連記事を参照してください。