常见设备查询方式

常见设备查询方式

媒体查询是响应式设计的核心，它们分为显示器媒体查询、智能手机媒体查询和平板媒体查询

显示器媒体查询

 

显示器媒体查询是以屏幕大小为基础划分的

640px

@media screen and (max-width: 640px)

{

 

}

 

800px

@media screen and (max-width: 800px)

{

 

}

1024px

@media screen and (max-width: 1024px)

{

 

}

智能手机媒体查询

 

适用于大部分主流智能手机

iPhone(2G-4S)

/*Landscape Mode*/

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

 

}/* Portrait Mode */

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

 

}

iPhone 4

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),

only screen and (min-device-pixel-ratio : 1.5)

{

 

}

iPhone5

@media only screen and (min-device-width : 320px) and(max-device-width : 568px) {

  /* 样式写在这里 */

}

iPhone6

@media only screen and (min-device-width: 375px) and(max-device-width: 667px) and (orientation : portrait) {

     /*iPhone 6Portrait*/

}

@media only screen and (min-device-width: 375px) and(max-device-width: 667px) and (orientation : landscape) {

     /*iPhone 6landscape*/

}

@media only screen and (min-device-width: 414px) and(max-device-width: 736px) and (orientation : portrait) {

     /*iPhone 6+Portrait*/

}

@media only screen and (min-device-width: 414px) and(max-device-width: 736px) and (orientation : landscape) {

     /*iPhone 6+landscape*/

}

@media only screen and (max-device-width: 640px), onlyscreen and (max-device-width: 667px), only screen and (max-width: 480px){

     /*iPhone 6and iPhone 6+ portrait and landscape*/

}

@media only screen and (max-device-width: 640px), onlyscreen and (max-device-width: 667px), only screen and (max-width: 480px) and(orientation : portrait){

     /*iPhone 6and iPhone 6+ portrait*/

}

@media only screen and (max-device-width: 640px), onlyscreen and (max-device-width: 667px), only screen and (max-width: 480px) and(orientation : landscape){

     /*iPhone 6and iPhone 6+ landscape*/

}

HTC Evo，BlackBerry Torch，HTC Thunderbolt，HD2

@media screen and (max-device-width: 480px)

{

 

}

平板媒体查询

 

这个列表会有点长

iPad

/* Landscape Mode */@media (max-device-width: 1024px)and (orientation: landscape) {

 

}

/* Portrait Mode */@media (max-device-width: 768px)and (orientation: portrait) {

 

}

iPad 2

/* Landscape Mode */@media (max-device-width: 1024px)and (orientation: landscape) {

 

}

/* Portrait Mode */@media (max-device-width: 768px)and (orientation: portrait) {

 

}

iPad 3

/* Landscape Mode */@media (max-device-width: 1024px)and (orientation: landscape) {

 

}

/* Portrait Mode */@media (max-device-width: 768px)and (orientation: portrait) {

 

}

iPad mini

@media only screen and (min-device-width : 768px) and(max-device-width : 1024px)and (-webkit-min-device-pixel-ratio: 1)  {

  /* 样式写在这里 */

}

Samsung Galaxy Tab 10.1

/* Landscape Mode */@media (max-device-width: 1280px)and (orientation: landscape) {

 

}

/* Portrait Mode */@media (max-device-width: 800px)and (orientation: portrait) {

 

}

Motorola Xoom

/* Landscape Mode */@media (max-device-width: 1280px)and (orientation: landscape) {

 

}

/* Portrait Mode */@media (max-device-width: 800px)and (orientation: portrait) {

 

}

HTC Flyer

/* Landscape Mode */@media (max-device-width: 1024px)and (orientation: landscape) {

 

}

/* Portrait Mode */@media (max-device-width: 600px)and (orientation: portrait) {

 

}

BlackBerry PlayBook

/* Landscape Mode */@media (max-device-width: 1024px)and (orientation: landscape) {

 

}

/* Portrait Mode */@media (max-device-width: 600px)and (orientation: portrait) {

 

}

HP TouchPad

/* Landscape Mode */@media (max-device-width: 1024px)and (orientation: landscape) {

 

}

/* Portrait Mode */@media (max-device-width: 768px)and (orientation: portrait) {

 

}

Lenovo Thinkpad Tablet

/* Landscape Mode */@media (max-device-width: 1280px)and (orientation: landscape) {

 

}

/* Portrait Mode */@media (max-device-width: 800px)and (orientation: portrait) {

 

}

Sony Tablet S

/* Landscape Mode */@media (max-device-width: 1280px)and (orientation: landscape) {

 

}

/* Portrait Mode */@media (max-device-width: 800px)and (orientation: portrait) {

 

}

T-Mobile G-Slate

/* Landscape Mode */@media (max-device-width: 1280px)and (orientation: landscape) {

 

}

/* Portrait Mode */@media (max-device-width: 768px)and (orientation: portrait) {

 

}

ViewSonic ViewPad 10

/* Landscape Mode */@media (max-device-width: 1024px)and (orientation: landscape) {

 

}

/* Portrait Mode */@media (max-device-width: 600px)and (orientation: portrait) {

 

}

Dell Streak 7

/* Landscape Mode */@media (max-device-width: 800px)and (orientation: landscape) {

 

}

/* Portrait Mode */@media (max-device-width: 480px)and (orientation: portrait) {

 

}

ASUS Eee Pad Transformer

/* Landscape Mode */@media (max-device-width: 1080px)and (orientation: landscape) {

 

}

/* Portrait Mode */@media (max-device-width: 800px)and (orientation: portrait) {

 

}