CSS3教程:Responsive框架常见的Media Queries片段
Responsive设计在现代Web设计中可谓是越来越流行，但很同学们并未理解其真正的设计概念，往往把Responsive视为一种自适应布局。当然有很多同学也在尝试动写Responsive的案例，但如何取其断点左右纠结，如何设置哪几个断点？又从何入手？
Responsive中的断点都依赖于CSS3的Media Queries来决断。曾在CSS3 Media Queries模板、使用em单位创建CSS3的Media Queries和iPads和iPones的Media Queries有过这方面的介绍。今天特意根据一些Responsive框架整理了一些常见的Media Queries片段，以供大家参考：
CSS3 Media Queries片段
在这里主要分成三类：移动端、PC端以及一些常见的响应式框架的Media Queries片段。
移动端Media Queries片段
iPhone5
screen (device-aspect- /) {}
或者： screen (device- px) (device- px) (-webkit-device-pixel- ){}
iPhone 5 In Portrait & Landscape
only screen (min-device-width px) (max-device-width px){ }
iPhone 5 In Landscape
only screen (min-device-width px) (max-device-width px) (orientation landscape){ }
iPhone 5 In Portrait
only screen (min-device-width px) (max-device-width px) (orientation portrait){ }
iPone4
only screen (-webkit-min-device-pixel-ratio ), only screen (min-device-pixel-ratio ) {}
iPhone 3G
screen (device- px) (device- px) (-webkit-device-pixel- ){}
iPhone
/ screen (max-device-width: px) {}
/ screen (max-device-width: px) {}
Blackberry Torch
screen (max-device- px) {}
Samsung S3
only screen (-webkit-device-pixel- ) {}
Google Nexus 7
screen (device- px) (device- px) (-webkit-min-device-pixel- ) (-webkit-max-device-pixel- ) {}
Samsung Galaxy S3
only screen (-webkit-device-pixel- ) {}
Samsung Galaxy S2
screen (device- px) (device- px) (-webkit-device-pixel- ) {}
Galaxy Tab 10.1
/ (max-device-width: px) (orientation: landscape) {}
/ (max-device-width: px) (orientation: portrait) {}
iPad In Portrait & Landscape
only screen (min-device-width px) (max-device-width px){ }
iPad In Landscape
only screen (min-device-width px) (max-device-width px) (orientation landscape){ }
iPad In Portrait
only screen (min-device-width px) (max-device-width px) (orientation portrait){ }
Retina iPad In Portrait & Landscape
only screen (min-device-width px) (max-device-width px) (-webkit-min-device-pixel- ){ }
Retina iPad in landscape
only screen (min-device-width px) (max-device-width px) (orientation landscape) (-webkit-min-device-pixel- ){ }
Retina iPad in portrait
only screen (min-device-width px) (max-device-width px) (orientation portrait) (-webkit-min-device-pixel- ){ }
iPad Mini In Portrait & Landscape
only screen (min-device-width px) (max-device-width px) (-webkit-min-device-pixel- ){ }
iPad Mini In Landscape
only screen (min-device-width px) (max-device-width px) (orientation landscape) (-webkit-min-device-pixel- ){ }
iPad Mini In Portrait
only screen (min-device-width px) (max-device-width px) (orientation portrait) (-webkit-min-device-pixel- ) { }
桌面端
320px
screen (max- px) {}
640px
screen (max- px) {}
800px
screen (max- px) {}
1024px
screen (max- px) {}
1028px
screen (max- px) {}
除了上面的常见Media Queries片段之外，下面的网站还提供了一些其他的片段：
框架Media Queries片段
Boilerplate
/:http:5boilerplate.com/ only screen (min-width : px) (max-width : px) {
} only screen (min-width : px) {
} only screen (max-width : px) {
} only screen (min-width : px) (max-width : px) {
} only screen (min-width : px) (max-width : px) (orientation : landscape) {
} only screen (min-width : px) (max-width : px) (orientation : portrait) {
} only screen (min-width : px) {
} only screen (min-width : px) {
}only screen (-webkit-min-device-pixel-ratio : ),
only screen (min-device-pixel-ratio : ) {
}
Bootstrap的Media Queries
{ ... }
{ ... }
{ ... }
{ ... }
Foundation的Media Queries
/:http:.zurb.com/ only screen { } only screen (min-width: px) {} only screen (min-width: px) {} only screen (min-width: px) {} only screen (orientation: landscape) {} only screen (orientation: portrait) {}
Skeleton的Media Queries
/:http:.getskeleton.com only screen (max-width: px) {} only screen (min-width: px) (max-width: px) {} only screen (max-width: px) {} only screen (min-width: px) (max-width: px) {} only screen (max-width: px) {}
FRAMELESS的Media Queries
/:http:.com/ screen (max-width: em){} screen (min-width: em) (max-width: em),
screen (min-width: em) (max-width: em),
screen (min-width: em) (max-width: em),
screen (min-width: em){} screen (min-width: em) (max-width: em),
screen (min-width: em){} screen (min-width: em){} screen (min-width: em){} screen (min-width: em){} screen (min-width: em){} screen (min-width: em) (max-width: em){} screen (min-width: em){}
Susy的Media Queries
{}{}{}{}{}
Less Framework 4
/:http:.com/ only screen (min-width: px) (max-width: px) {} only screen (max-width: px) {}
/ Mobile Layout: px (em) only screen (min-width: px) (max-width: px) {}
Golden Grid System的Media Queries
/:http:.com/ screen (min-width: em) {} screen (min-width: em) {} screen (min-width: em) {} screen (min-width: em) {} screen (min-width: em) {} screen (min-width: em) {} screen (min-width: em) {} screen (min-width: em) {} screen (min-width: em) {}
Fluid baseline的Media Queries
/:http:.com/ only screen (min-width: px) {} only screen (min-width: px) {} only screen (min-width: px) {} only screen (min-width: px) {} only screen (min-width: px) {} only screen (min-width: px) {} only screen (min-width: px) {}
320andUP
{
}{
}{
}{
}{
}{
}
Gridless
{
}{
}{
}
TotanTHEMES
/:http:.com/ only screen (max-width: px) {} only screen (min-width: px) (max-width: px) {} only screen (max-width: px) {} only screen (min-width: px) (max-width: px) {} only screen (max-width: px) {}
Responsive Grid System
{}
{} {}
{}
{}
本文搜集的是Media Queries在各种设备下的代码片段，希望这些片段能帮大家更好的理解Responsive断点的设置。如果大家有更好的方案，希望能在评论中分享。
2014年04月19日更新
基于视窗宽度的媒体查询断点设置
前提设置body的字体为100%。其具有一个简单的计算公式：100% = 16px = 1em = 14pt
/ = px screen (max-width: em){
}
/ = px screen (max-width: em){
}
/ = px screen (max-width: em){
}
/ = px screen (max-width: em){
}
/ = px screen (max-width: em){
}
/ = px screen (max-width: em){
}
/ = px screen (max-width : em){
}
/ = px screen (max-width : em){
}
/ = px screen (max-width: em){
}
/ = px screen (max-width: em){
}
/ = px screen (max-width: em){
}
/ = px screen (max-width: em){
}
/ Density (-webkit-min-device-pixel-ratio: ),(min-resolution: dpi){
}
/ Density (-webkit-min-device-pixel-ratio: ),(min-resolution: dpi){
}
/ Density (-webkit-min-device-pixel-ratio: ),(min-resolution: dpi){
}
/ Density (-webkit-min-device-pixel-ratio: ),(min-resolution: dpi){
}
/ Resolution dpi (min-resolution: dpi){
}
/ Resolution dpi (min-resolution:dpi){
}
/ Resolution dpi (min-resolution:dpi){
}
/ Resolution dpi (resolution:dpi){
}
出处：http://www.w3cplus.com/css3/media-query-snippets.html