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

@media screen and (device-aspect-ratio: 40/71) {}
或者：
@media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2){}	

iPhone 5 In Portrait & Landscape

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

iPhone 5 In Landscape

@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape){
// CSS Style
}	

iPhone 5 In Portrait

@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait){
// CSS Style
}	

iPone4

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

iPhone 3G

@media screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1){}	

iPhone

/*Landscape*/
@media screen and (max-device-width: 480px) {}

/*Portrait*/
@media screen and (max-device-width: 320px) {}	

Blackberry Torch

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

Samsung S3

@media only screen and (-webkit-device-pixel-ratio: 2) {}	

Google Nexus 7

@media screen and (device-width: 600px) and (device-height: 905px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) {}	

Samsung Galaxy S3

@media only screen and (-webkit-device-pixel-ratio: 2) {}	

Samsung Galaxy S2

@media screen and (device-width: 320px) and (device-height: 533px) and (-webkit-device-pixel-ratio: 1.5) {}	

Galaxy Tab 10.1

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

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

iPad In Portrait & Landscape

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px){
// CSS Styles
}	

iPad In Landscape

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape){
// CSS Styles
}	

iPad In Portrait

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait){
// CSS Styles
}	

Retina iPad In Portrait & Landscape

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2){
// CSS Styles
}	

Retina iPad in landscape

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2){
// CSS Styles
}	

Retina iPad in portrait

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2){
// CSS Styles
}	

iPad Mini In Portrait & Landscape

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

iPad Mini In Landscape

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1){
// CSS Style
}	

iPad Mini In Portrait

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1) {
// CSS Style
}	

桌面端

320px

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

640px

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

800px

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

1024px

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

1028px

@media screen and (max-width: 1028px) {}	

除了上面的常见Media Queries片段之外，下面的网站还提供了一些其他的片段：