いくつかの実用的な CSS メディア クエリ コード スニペット、個人の collection_html/css_WEB-ITnose

CSS3 の登場により、レスポンシブ Web デザインがシンプルになりました。 CSS3 は強力なメディア クエリを提供し、さまざまな条件に応じてさまざまなスタイルを設定でき、ページ コンテンツを変更することなくさまざまなデバイスに提供できます。

以下は、ページを画面に適応させるためにプロジェクトに追加できるいくつかの CSS メディア クエリ コード スニペットです:

iPhone5

Css コード

1. @media screen および (デバイス) -アスペクト比: 40/71) {
2. }
3. または
4. @media screen および (device-width: 320px) および (device-height: 568px) および (-webkit-device-pixel-ratio: 2) {
5. }

Blackberry Torat

CSS コード

1. @メディア画面と (max-device-width: 480px){
}

サムスン S3

CSS コード

@media のみ画面と (-webkit-device-pixel-ratio: 2) {
}

Google Nexus 7

CSSコード

@media screen および (device-width: 600px) および (device-height: 905px) および (-webkit-min-device-pixel-ratio: 1.331) および (-webkit-max-device-pixel-ratio: 1.332) {
}

iPad Mini

CSS コード

@media screen と (device-width: 768 px) および (device-height) : 1024px) および (-webkit - デバイスピクセル比: 1) {
}

iPad 3
風景

CSS コード

@media (max-device-wi d th: 1024px) と (方向: 風景 ) {
}

vertical

CSS コード

@media (max-device-width: 768px) および (orientation: 縦) {
}

Galaxy Tab 10.1
水平

CSS コード

@media (max-device-width: 1280px) および (orientation: Landscape) {
}

垂直

CSSコード

@media (max-device-width: 800px) および (orientation: 縦向き) {
1. 
   
}
2.