在创建移动响应式设计中，最重要的媒体查询是哪些？

Question

对于移动屏幕尺寸，有很多不同的媒体查询。在设计快速响应的移动网站时，要适应所有这些需求可能会让人不知所措。为手机设计时，最重要的使用哪些？我发现这篇文章很好地概述了可用的媒体查询：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 */
}

Answer 1

我建议仅通过以下四个媒体查询来关注Twitter的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) { ... }

在Bootstrap 3的文档中查看。