CSS3常用的Media Queries查询分辨率有哪些
2016-09-02 11:01:07
css3的media query查询， 做wap的时候很有帮助，CSS3 中的 Media Queries 可以让我们设置不同类型的媒体条件，并根据对应的条件，给相应符合条件的媒体调用相对应的样式表。现在最常见的一个例子，就是可以同时给 PC 的大屏幕和移动设备设置不同的样式表。这功能是非常强大的，它可以让我们定制不同的分辨率和设备，并在不改变内容的情况下，制作的网页在不同的分辨率和设备下都能显示正常，并且不会因此而丢失样式。
@media only screen and (min-device-width:768px) and (max-device-width:1024px) {
/* STYLES */
}
//iPad 横屏
@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:landscape) {
/* STYLES */
}
//iPad 竖屏
@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait) {
/* STYLES */
}
//高清屏 iPad Media Queries 即 iPad 3 & 4 的 Media Queries：
@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (-webkit-min-device-pixel-ratio:2) {
/* STYLES */
}
//高清屏 iPad 横屏
@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio:2) {
/* STYLES */
}
//高清屏 iPad 竖屏
@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio:2) {
/* STYLES GO HERE */
}
//iPad 1 & 2 Media Queries
@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (-webkit-min-device-pixel-ratio:1) {
/* STYLES */
}
//iPad 1 & 2 横屏
@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio:1) {
/* STYLES */
}
//iPad 1 & 2 竖屏,iPad mini 也是和 iPad 1 和 2 一样。
@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio:1) {
/* STYLES */
}
//iPhone 5 Media Queries
@media only screen and (min-device-width:320px) and (max-device-width:568px) {
/* STYLES */
}
//iPhone 5 横屏
@media only screen and (min-device-width:320px) and (max-device-width:568px) and (orientation:landscape) {
/* STYLES */
}
//iPhone 5 竖屏
@media only screen and (min-device-width:320px) and (max-device-width:568px) and (orientation:portrait) {
/* STYLES */
}
//iPhone 2G, 3G, 4, 4S Media Queries
@media only screen and (min-device-width:320px) and (max-device-width:480px) {
/* STYLES */
}
//iPhone 2G-4S 横屏
@media only screen and (min-device-width:320px) and (max-device-width:480px) and (orientation:landscape) {
/* STYLES */
}
//iphone5
@media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2){
}
//iphone6
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) {
}
//iphone6 plus
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) {
}
很多人会反驳说css3的这个media query属性还不能很好的兼容pc端，给大家一个建议, respond.min.js就能解决这个问题
