Responsive Design常用的媒体查询

￡神魔★判官ぃ 2022-08-05 12:12 103阅读 0赞

（PS:原文写于2012年，本文参照原文作了适当修改，不当之处请指出）

现在Web朝着响应式的趋势发展，媒体查询在创建响应式网站中起到了主要作用。

没有媒体查询几乎不能实现响应式设计，利用媒体查询，我们可以针对特定的设备，如显示器、智能手机和平板，写CSS。

> 媒体查询是响应式设计的核心

在这篇文章中我将分享一些到目前为止我收集到的常用媒体查询。在一些示例中，我可能是错误的，但是不用担心，因为我针对这个开通了评论功能。我把它们分为显示器媒体查询、智能手机媒体查询和平板媒体查询

## 显示器媒体查询 ##

--------------------

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

## 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 6 Portrait*/
    }
    
    @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) {
         /*iPhone 6 landscape*/
    }
    
    @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), only screen and (max-device-width: 667px), only screen and (max-width: 480px){
         /*iPhone 6 and iPhone 6+ portrait and landscape*/
    }
    
    @media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : portrait){
         /*iPhone 6 and iPhone 6+ portrait*/
    }
    
    @media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : landscape){
         /*iPhone 6 and 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 ##

## iPad 3 ##

## 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 ##

## HTC Flyer ##

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

## BlackBerry PlayBook ##

## HP TouchPad ##

## Lenovo Thinkpad Tablet ##

## Sony Tablet S ##

## 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 ##

## 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) 
    { 
    
    }

英文原文：[Some Media Queries for Responsive Design][]

译文出处：[http://www.ido321.com/1540.html][http_www.ido321.com_1540.html]

参考文章：  
[七个高度有效的媒体查询技巧][Link 1]  
[iPads和iPhones的Media Queries][iPads_iPhones_Media Queries]

[Some Media Queries for Responsive Design]: http://www.xpertdeveloper.com/2012/08/media-queries-for-responsive-design/
[http_www.ido321.com_1540.html]: http://www.ido321.com/1540.html
[Link 1]: http://www.w3cplus.com/css3/7-habits-of-highly-effective-media-queries.html
[iPads_iPhones_Media Queries]: http://www.w3cplus.com/css3/css-media-queries-for-iPads-and-iPhones.html