!!实用的CSS Media Query代码片段

移动互联网时代，新设备层出不穷，各种屏幕大小和分辨率的出现，为Web前端设计增加了一些挑战。如何让网站或Web应用完美显示在各种不同的设备上呢？答案是采用响应式设计，让页面根据设备屏幕自动适应并调整。 

http:///snippets/

CSS3的出现让响应式Web设计变得简单，CSS3提供了强大的media queries，允许你针对不同的条件设置不同的样式，可以在不修改页面内容的情况下，为不同设备提供不同的样式效果。 

以下是一些CSS media queries代码片段，你可以添加在自己的项目中，让页面根据屏幕自适应： 

iPhone5 

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

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

iPad Mini 

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

iPad 3 

横向 

@media (max-device-width: 1024px) and (orientation: landscape) {
}

竖向 

@media (max-device-width: 768px) and (orientation: portrait) {
}

Galaxy Tab 10.1 

横向 

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

竖向 

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