在开发微信网站需要用到的CSS3 Media Queries片段大全，包括IPhone6，Iphone6 plus，iPhone5的CSS3 Media Queries片段。因为移动端屏幕规则繁多，除了Iphone系列，还有多如牛毛的安卓手机。我们需要一套比较齐全的Media Queries片段大全，来应对各种屏幕的显示效果。

一、基于视窗宽度的媒体查询片段

前提：设置body的字体为100%。其具有一个简单的计算公式：100% = 16px = 1em = 14pt

/*Viewport = 1920px*/
@media screen and (max-width: 120em){

}
/*Viewport = 1680px*/
@media screen and (max-width: 105em){

}
/*Viewport = 1400px*/
@media screen and (max-width: 87.5em){

}
/*Viewport = 1200px*/
@media screen and (max-width: 75em){

}
/*Viewport = 1024px*/
@media screen and (max-width: 64em){

}
/*Viewport = 960px*/
@media screen and (max-width: 60em){

}
/*Viewport = 800px*/
@media screen and (max-width : 50em){

}

/*Viewport = 768px*/
@media screen and (max-width : 48em){

}

/*Viewport = 600px*/
@media screen and (max-width: 37.5em){

}

/*Viewport = 480px*/
@media screen and (max-width: 30em){
}

/*Viewport = 320px*/
@media screen and (max-width: 20em){

}

/*Viewport = 240px*/
@media screen and (max-width: 15em){

}


/*
	High Resolution/Retina Display Media Queries
*/
/*Pixel Density 3*/
@media(-webkit-min-device-pixel-ratio: 3),(min-resolution: 192dpi){

}
/*Pixel Density 2*/
@media(-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){

}
/*Pixel Density 1.5*/
@media(-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 124.8dpi){

}
/*Pixel Density 1.25*/
@media(-webkit-min-device-pixel-ratio: 1.25),(min-resolution: 120dpi){

}

/*
	Printed Style Media Queries
*/
/*Print Resolution 300 dpi*/
@media print and (min-resolution: 300dpi){

}

/*Print Resolution 144 dpi*/
@media print and (min-resolution:144dpi){

}

/*Print Resolution 96 dpi*/
@media print and (min-resolution:96dpi){

}

/*Print Resolution 72 dpi*/
@media print and (resolution:72dpi){

}

二、常见设备的CSS3 Media Queries片段

在这里主要分成三类：移动端、PC端以及一些常见的响应式框架的Media Queries片段。

Iphone6 and Iphone6 plus

@media (device-width:375px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone 6 */
.class{}
}
@media (device-width:414px) and (-webkit-min-device-pixel-ratio:2.6){/* 兼容iphone6 plus */
.class{}
}

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