CSS3 レスポンシブ レイアウト デザインの使用のレビュー

レスポンシブデザインとは、デバイスの解像度に応じて表示スタイルが異なることを意味します。
メディア属性は、メディアタイプごとに異なるスタイルを指定するために使用されます。ブラウザの幅と高さに関係なく、ページを再レンダリングします。
構文: @media mediatype and | not | not (メディア機能) {}
例:
max-width: 600px)" href="small .css"/>
結果: 解像度を 600 に上げると、このスタイル シートのスタイルが表示されます。

メディアタイプ:

all for all devices

print for printer and print devices

screen for computer screen、タブレット、スマートフォン。

手

について——

@media screen and (max-width : 600px) {

/*幅が 600px 未満のコンピュータ画面と一致する*/ }

not キーワードは、特定のシステム メディア タイプを除外するために使用されます。

@media not print {
/*プリンター以外のすべてのデバイスに一致*/
}

のみは、特定のメディアタイプを指定するために使用されます。

@media のみの画面と (
min-width
:
300
) と (max-width:500){
/*この段落はカラー スクリーン デバイスのみに適用されます*/ } メディアの特性: ( 一般的に使用されます)
max-width(
max-height

): 最大幅と最大高さ

@media (max-width: 600px) {

インターフェイス幅が600px未満のデバイスと一致 } dth(

min -height

): 最小の幅と高さ
@media (min-width: 400px) {
インターフェイス幅が400pxを超えるデバイスと一致します
} max-device-width(max-device-height) デバイスの最大幅と高さ @ media (max-device-width: 800px) {
幅が800px未満のデバイス（インターフェイスではない）を照合します
}
min-device-width(min-device-height): デバイスの最大幅と高さ
@ media ( min-device-width: 600px) {
幅が 600px を超えるデバイス (インターフェイスではない) を照合します
}
orientation: 縦長の垂直画面
href="indexa.css"/>
結果: このスタイルを縦画面で表示
orientation:landscape 横画面
=="indexa.css"/>
結果：横向きでこのように表示されました

以上がCSS3 レスポンシブ レイアウト デザインの使用のレビューの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。