CSS 3メディア照会
3672 ワード
CSS 3メディア照会
レスポンスレイアウト1.応答的なレイアウトは、各端末のバージョンを開発するのではなく、複数の端末に適応できるWebサイトです.
2.@media(メディアクエリ)
2.1構文**
2.2構文メディアタイプ 値
説明
all
すべてのデバイスに使用
print
プリンタおよび印刷プレビュー用
screen
パソコンの画面、タブレット、スマートフォンなどに使います.(最も一般的)
speech
スクリーンリーダーなどの発声装置に応用メディア機能(media feature) 値
説明
max-width
出力デバイスのページの最大表示領域幅を定義します.
min-width
出力デバイスのページの最小表示領域幅を定義します.スクリーンサイズ(screen) を選択します.
値
携帯電話
(<768px)
フラットパネル
(≥768px)
デスクトップディスプレイ
(≥992px)
大画面ディスプレイ
(≥1200px)
メディアのプロパティ
メディア属性はCSS 3に追加されたもので、多くのメディア属性には「min-」と「max-」の接頭辞があり、「以下等しい」と「以上等しい」を表す.これにより、HTMLやXMLと競合する「」文字の使用が回避されます.
[注]メディア属性はカッコ()で囲まれている必要があります.そうしないと無効です.
次の表に、すべてのメディア・プロパティを示します.
width | min-width | max-width height | min-height | max-height device-width | min-device-width | max-device-width device-height | min-device-height | max-device-height aspect-ratio | min-aspect-ratio | max-aspect-ratio device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio color | min-color | max-color color-index | min-color-index | max-color-index monochrome | min-monochrome | max-monochrome resolution | min-resolution | max-resolution scan | grid
CSS 3メディア照会の書き方:
Mediaメディアクエリーのすべてのパラメータの要約:
メディア・クエリーには、以下のように、一般的ではない関連機能も含まれています. width:ブラウザの可視幅、 height:ブラウザの可視高さ、 device-width:デバイス画面の幅、 device-height:デバイス画面の高さ、 orientation:検出装置は現在横方向か縦方向か、 である. aspect-ratio:ブラウザの可視幅と高さの割合を検出(例:aspect-ratio:16/9)、 device-aspect-ratio:デバイスの幅と高さの割合を検出し、 color:色のビット数を検出する(例えばmin-color:32はデバイスが32ビットの色を持っているかどうかを検出する)、 . color-index:デバイスカラーインデックステーブルの色を確認します(彼の値は負数ではありません)、 monochrome:単色フレームバッファ領域の各画素のビット数を検出する(これは高度すぎて、私たちがあまり使わないと推定される)、 resolution:画面またはプリンタの解像度を検出(例:min-resolution:300 dpiまたはmin-resolution:118 dpcm)、 grid:出力されたデバイスがグリッドまたはビットマップデバイスであるかを検出します.
4.実際の開発では、応答型のページ幅の最大値を設定する必要があります.最大幅を無視すると、肥大化したページレイアウトやばらばらなページレイアウトが視覚的な洪水をもたらします.つまり、lowのように見えます.また、現在の表示装置におけるウェブページ幅の問題(紙面の問題のため、工業革命から引っ張られない)について述べると、現在最も一般的な幅は、960 px以上のPC端(1920 px、1600 px、1440 px、1280 px、1140 px、960 px)、960 pxから640 pxまでの間のタブレット端(768 px、640 px)、640 px以下の携帯電話端(480 px、320 px)であり、以上の幅が長く存在し、表示装置におけるウェブ幅が長期にわたってこのような状態にある場合、応答型ウェブ幅設計では、基本的にこれらの寸法から考えると十分である.metaタグの設定を忘れないでください.書くのを忘れたら、ブラウザはメディアクエリーコードを認識しません.メディア検索はストリーミングレイアウトを採用し、ステーションの携帯電話端末の100%を占めている.PC端のウェブページは要素に固定幅を設定しないで設定することができて、このようにメンテナンスしやすいです;
レスポンスレイアウト1.応答的なレイアウトは、各端末のバージョンを開発するのではなく、複数の端末に適応できるWebサイトです.
2.@media(メディアクエリ)
2.1構文**
@media mediaType and|not|only (media feature) {
/*CSS-Code;*/
}
2.2構文
説明
all
すべてのデバイスに使用
プリンタおよび印刷プレビュー用
screen
パソコンの画面、タブレット、スマートフォンなどに使います.(最も一般的)
speech
スクリーンリーダーなどの発声装置に応用
説明
max-width
出力デバイスのページの最大表示領域幅を定義します.
min-width
出力デバイスのページの最小表示領域幅を定義します.
値
携帯電話
(<768px)
フラットパネル
(≥768px)
デスクトップディスプレイ
(≥992px)
大画面ディスプレイ
(≥1200px)
メディアのプロパティ
メディア属性はCSS 3に追加されたもので、多くのメディア属性には「min-」と「max-」の接頭辞があり、「以下等しい」と「以上等しい」を表す.これにより、HTMLやXMLと競合する「」文字の使用が回避されます.
[注]メディア属性はカッコ()で囲まれている必要があります.そうしないと無効です.
次の表に、すべてのメディア・プロパティを示します.
width | min-width | max-width height | min-height | max-height device-width | min-device-width | max-device-width device-height | min-device-height | max-device-height aspect-ratio | min-aspect-ratio | max-aspect-ratio device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio color | min-color | max-color color-index | min-color-index | max-color-index monochrome | min-monochrome | max-monochrome resolution | min-resolution | max-resolution scan | grid
CSS 3メディア照会の書き方:
Document
Mediaメディアクエリーのすべてのパラメータの要約:
メディア・クエリーには、以下のように、一般的ではない関連機能も含まれています.
4.実際の開発では、応答型のページ幅の最大値を設定する必要があります.最大幅を無視すると、肥大化したページレイアウトやばらばらなページレイアウトが視覚的な洪水をもたらします.つまり、lowのように見えます.また、現在の表示装置におけるウェブページ幅の問題(紙面の問題のため、工業革命から引っ張られない)について述べると、現在最も一般的な幅は、960 px以上のPC端(1920 px、1600 px、1440 px、1280 px、1140 px、960 px)、960 pxから640 pxまでの間のタブレット端(768 px、640 px)、640 px以下の携帯電話端(480 px、320 px)であり、以上の幅が長く存在し、表示装置におけるウェブ幅が長期にわたってこのような状態にある場合、応答型ウェブ幅設計では、基本的にこれらの寸法から考えると十分である.metaタグの設定を忘れないでください.書くのを忘れたら、ブラウザはメディアクエリーコードを認識しません.メディア検索はストリーミングレイアウトを採用し、ステーションの携帯電話端末の100%を占めている.PC端のウェブページは要素に固定幅を設定しないで設定することができて、このようにメンテナンスしやすいです;