常见设备查询方式

常见设备查询方式
媒体查询是响应式设计的核心，它们分为显示器媒体查询、智能手机媒体查询和平板媒体查询
显示器媒体查询
 
显示器媒体查询是以屏幕大小为基础划分的
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) {

 
}