現(xiàn)在響應式設計應該是碼農(nóng)標配了，今天就學習學習響應式的重量級大殺器 -- media query

語法

media_query_list: [, ]*

media_query: [[only | not]? [ and ]*]

| [ and ]*

expression: ( [: ]? )

media_type: all | aural | braille | handheld | print |

projection | screen | tty | tv | embossed

media_feature: 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

蛋疼吧，原諒我~

@media meida_type and media_feature, media_type and media_feature

兩種加載方式

@media (max-width: 600px) {

.facet_sidebar {

display: none;

}

}

注意：所有的media query css都會加載，只有符合條的會被解析

邏輯操作符

and 同編程語言里的and

not 同編程語言里的not

逗號

當逗號兩邊的條件有一個為真都為真， 同編程語言里的or

media type

all | aural | braille | handheld | print |

projection | screen | tty | tv | embossed| 3d-glasses

media feature

color

color-index

aspect-ratio

device-aspect-ratio

device-height

device-width

grid

height

monochrome

orientation : landscape | portrait

resolution

scan

width

常見設備media query

iPhones

/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */

@media only screen

and (min-device-width: 320px)

and (max-device-width: 480px)

and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */

@media only screen

and (min-device-width: 320px)

and (max-device-width: 480px)

and (-webkit-min-device-pixel-ratio: 2)

and (orientation: portrait) {

}

/* Landscape */

@media only screen

and (min-device-width: 320px)

and (max-device-width: 480px)

and (-webkit-min-device-pixel-ratio: 2)

and (orientation: landscape) {

}

/* ----------- iPhone 5 and 5S ----------- */

/* Portrait and Landscape */

@media only screen

and (min-device-width: 320px)

and (max-device-width: 568px)

and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */

@media only screen

and (min-device-width: 320px)

and (max-device-width: 568px)

and (-webkit-min-device-pixel-ratio: 2)

and (orientation: portrait) {

}

/* Landscape */

@media only screen

and (min-device-width: 320px)

and (max-device-width: 568px)

and (-webkit-min-device-pixel-ratio: 2)

and (orientation: landscape) {

}

/* ----------- iPhone 6 ----------- */

/* Portrait and Landscape */

@media only screen

and (min-device-width: 375px)

and (max-device-width: 667px)

and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */

@media only screen

and (min-device-width: 375px)

and (max-device-width: 667px)

and (-webkit-min-device-pixel-ratio: 2)

and (orientation: portrait) {

}

/* Landscape */

@media only screen

and (min-device-width: 375px)

and (max-device-width: 667px)

and (-webkit-min-device-pixel-ratio: 2)

and (orientation: landscape) {

}

/* ----------- iPhone 6+ ----------- */

/* Portrait and Landscape */

@media only screen

and (min-device-width: 414px)

and (max-device-width: 736px)

and (-webkit-min-device-pixel-ratio: 3) {

}

/* Portrait */

@media only screen

and (min-device-width: 414px)

and (max-device-width: 736px)

and (-webkit-min-device-pixel-ratio: 3)

and (orientation: portrait) {

}

/* Landscape */

@media only screen

and (min-device-width: 414px)

and (max-device-width: 736px)

and (-webkit-min-device-pixel-ratio: 3)

and (orientation: landscape) {

}

galaxy

/* ----------- Galaxy S3 ----------- */

/* Portrait and Landscape */

@media screen

and (device-width: 320px)

and (device-height: 640px)

and (-webkit-device-pixel-ratio: 2) {

}

/* Portrait */

@media screen

and (device-width: 320px)

and (device-height: 640px)

and (-webkit-device-pixel-ratio: 2)

and (orientation: portrait) {

}

/* Landscape */

@media screen

and (device-width: 320px)

and (device-height: 640px)

and (-webkit-device-pixel-ratio: 2)

and (orientation: landscape) {

}

/* ----------- Galaxy S4 ----------- */

/* Portrait and Landscape */

@media screen

and (device-width: 320px)

and (device-height: 640px)

and (-webkit-device-pixel-ratio: 3) {

}

/* Portrait */

@media screen

and (device-width: 320px)

and (device-height: 640px)

and (-webkit-device-pixel-ratio: 3)

and (orientation: portrait) {

}

/* Landscape */

@media screen

and (device-width: 320px)

and (device-height: 640px)

and (-webkit-device-pixel-ratio: 3)

and (orientation: landscape) {

}

/* ----------- Galaxy S5 ----------- */

/* Portrait and Landscape */

@media screen

and (device-width: 360px)

and (device-height: 640px)

and (-webkit-device-pixel-ratio: 3) {

}

/* Portrait */

@media screen

and (device-width: 360px)

and (device-height: 640px)

and (-webkit-device-pixel-ratio: 3)

and (orientation: portrait) {

}

/* Landscape */

@media screen

and (device-width: 360px)

and (device-height: 640px)

and (-webkit-device-pixel-ratio: 3)

and (orientation: landscape) {

}

htc

/* ----------- HTC One ----------- */

/* Portrait and Landscape */

@media screen

and (device-width: 360px)

and (device-height: 640px)

and (-webkit-device-pixel-ratio: 3) {

}

/* Portrait */

@media screen

and (device-width: 360px)

and (device-height: 640px)

and (-webkit-device-pixel-ratio: 3)

and (orientation: portrait) {

}

/* Landscape */

@media screen

and (device-width: 360px)

and (device-height: 640px)

and (-webkit-device-pixel-ratio: 3)

and (orientation: landscape) {

}

ipad

/* ----------- iPad mini ----------- */

/* Portrait and Landscape */

@media only screen

and (min-device-width: 768px)

and (max-device-width: 1024px)

and (-webkit-min-device-pixel-ratio: 1) {

}

/* Portrait */

@media only screen

and (min-device-width: 768px)

and (max-device-width: 1024px)

and (orientation: portrait)

and (-webkit-min-device-pixel-ratio: 1) {

}

/* Landscape */

@media only screen

and (min-device-width: 768px)

and (max-device-width: 1024px)

and (orientation: landscape)

and (-webkit-min-device-pixel-ratio: 1) {

}

/* ----------- iPad 1 and 2 ----------- */

/* Portrait and Landscape */

@media only screen

and (min-device-width: 768px)

and (max-device-width: 1024px)

and (-webkit-min-device-pixel-ratio: 1) {

}

/* Portrait */

@media only screen

and (min-device-width: 768px)

and (max-device-width: 1024px)

and (orientation: portrait)

and (-webkit-min-device-pixel-ratio: 1) {

}

/* Landscape */

@media only screen

and (min-device-width: 768px)

and (max-device-width: 1024px)

and (orientation: landscape)

and (-webkit-min-device-pixel-ratio: 1) {

}

/* ----------- iPad 3 and 4 ----------- */

/* Portrait and Landscape */

@media only screen

and (min-device-width: 768px)

and (max-device-width: 1024px)

and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */

@media only screen

and (min-device-width: 768px)

and (max-device-width: 1024px)

and (orientation: portrait)

and (-webkit-min-device-pixel-ratio: 2) {

}

/* Landscape */

@media only screen

and (min-device-width: 768px)

and (max-device-width: 1024px)

and (orientation: landscape)

and (-webkit-min-device-pixel-ratio: 2) {

}

nexus 平板

/* ----------- Asus Nexus 7 ----------- */

/* Portrait and Landscape */

@media screen

and (device-width: 601px)

and (device-height: 906px)

and (-webkit-min-device-pixel-ratio: 1.331)

and (-webkit-max-device-pixel-ratio: 1.332) {

}

/* Portrait */

@media screen

and (device-width: 601px)

and (device-height: 906px)

and (-webkit-min-device-pixel-ratio: 1.331)

and (-webkit-max-device-pixel-ratio: 1.332)

and (orientation: portrait) {

}

/* Landscape */

@media screen

and (device-width: 601px)

and (device-height: 906px)

and (-webkit-min-device-pixel-ratio: 1.331)

and (-webkit-max-device-pixel-ratio: 1.332)

and (orientation: landscape) {

}

kindle fire

/* ----------- Kindle Fire HD 7" ----------- */

/* Portrait and Landscape */

@media only screen

and (min-device-width: 800px)

and (max-device-width: 1280px)

and (-webkit-min-device-pixel-ratio: 1.5) {

}

/* Portrait */

@media only screen

and (min-device-width: 800px)

and (max-device-width: 1280px)

and (-webkit-min-device-pixel-ratio: 1.5)

and (orientation: portrait) {

}

/* Landscape */

@media only screen

and (min-device-width: 800px)

and (max-device-width: 1280px)

and (-webkit-min-device-pixel-ratio: 1.5)

and (orientation: landscape) {

}

/* ----------- Kindle Fire HD 8.9" ----------- */

/* Portrait and Landscape */

@media only screen

and (min-device-width: 1200px)

and (max-device-width: 1600px)

and (-webkit-min-device-pixel-ratio: 1.5) {

}

/* Portrait */

@media only screen

and (min-device-width: 1200px)

and (max-device-width: 1600px)

and (-webkit-min-device-pixel-ratio: 1.5)

and (orientation: portrait) {

}

/* Landscape */

@media only screen

and (min-device-width: 1200px)

and (max-device-width: 1600px)

and (-webkit-min-device-pixel-ratio: 1.5)

and (orientation: landscape) {

}

桌面顯示器

/* ----------- Non-Retina Screens ----------- */

@media screen

and (min-device-width: 1200px)

and (max-device-width: 1600px)

and (-webkit-min-device-pixel-ratio: 1) {

}

/* ----------- Retina Screens ----------- */

@media screen

and (min-device-width: 1200px)

and (max-device-width: 1600px)

and (-webkit-min-device-pixel-ratio: 2)

and (min-resolution: 192dpi) {

}

總結(jié)

以上是生活随笔為你收集整理的css3 media query orientation,CSS3之media query的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。