移动屏幕尺寸有很多不同的媒体查询。在设计响应式移动网站时，可能会压倒所有人。在设计移动设备时，最重要的是哪些？我发现这篇文章做了一个很好的工作概述可用的媒体查询：
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/。
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
解决方法
我建议采取后
Twitter’s Bootstrap与这四个媒体查询：
/* Landscape phones and down */
@media (max-width: 480px) { ... }
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
/* Large desktop */
@media (min-width: 1200px) { ... }
编辑：这个问题的原始答案是从Bootstrap版本2。Bootstrap以来更改了他们的媒体查询在版本3.注意，没有明确查询小于768px的设备。这种做法有时被称为移动优先。任何媒体查询以外的任何内容都会应用于所有设备。媒体查询块中的所有内容都会扩展并覆盖全局可用的内容以及所有较小设备的样式。认为它是响应式设计的渐进增强。
/* Extra small devices (phones,less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets,768px and up) */
@media (min-width: 768px) { ... }
/* Medium devices (desktops,992px and up) */
@media (min-width: 992px) { ... }
/* Large devices (large desktops,1200px and up) */
@media (min-width: 1200px) { ... }
