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

Which are the most important media queries to use in creating mobile responsive design?

提问by Matt

There are a lot different media queries for mobile screen sizes. It can be overwhelming to accomodate all of them when designing a responsive mobile site. Which are the most important ones to use when designing for mobile? I found this article that does a pretty good job of outlining the available media queries: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/.

移动屏幕尺寸有很多不同的媒体查询。在设计响应式移动网站时，容纳所有这些可能会让人不知所措。在为移动设备设计时，哪些是最重要的？我发现这篇文章在概述可用的媒体查询方面做得很好：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 */
}

回答by cjlarose

I'd recommend taking after Twitter's Bootstrapwith just these four media queries:

我建议仅使用以下四个媒体查询来学习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) { ... }

Edit: The original answer (above) was taken from Bootstrap version 2. Bootstrap has since changed their media queries in version 3. Notice that is there is no explicit query for devices smaller than 768px. This practice is sometimes called mobile-first. Everything outside of any media query is applied to all devices. Everything inside a media query block extends and overrides what is available globally as well as styles for all smaller devices. Think of it as progressive enhancement for responsive design.

编辑：原始答案（上图）取自 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) { ... }

Check it out on Bootstrap 3's docs.

在Bootstrap 3 的文档中查看。

回答by Jonathan Tonge

1. Design in percentages and initially optimized for a 15"+ screen.

2. Review what components you want to see on a phone - just keep essential content and remove elements that don't work or clutter the small screen. These styles can be contained within @media (max-width: 480px) { ... }

3. As things move to 10" or less, redesign your buttons and interactive components for fingers rather than mouse. @media (max-width: 767px) { ... }

4. Shrink the width of your browser. When things don't look so good, get in to the console and figure out what styles can be changed or items that need to be redesigned or removed. Mark what screen width they occur at and create a media query.

5. At the end, review your media queries to see if some of them can be grouped together (ie if you have one at 750 and 767 pixels width, you might just as well with combining them in the 767).

1. 按百分比设计，最初针对 15"+ 屏幕进行了优化。

2. 查看您希望在手机上看到哪些组件 - 只需保留基本内容并删除不起作用或使小屏幕混乱的元素。这些样式可以包含在@media (max-width: 480px) { ... }

3. 随着事情发展到 10" 或更小，请为手指而不是鼠标重新设计按钮和交互组件。@media (max-width: 767px) { ... }

4. 缩小浏览器的宽度。当事情看起来不太好时，进入控制台并找出可以更改的样式或需要重新设计或删除的项目。标记它们出现在什么屏幕宽度并创建媒体查询。

5. 最后，查看您的媒体查询，看看它们中的一些是否可以组合在一起（即，如果您有一个 750 和 767 像素宽度的，您最好将它们组合到 767 中）。

If you are comfortable w jQuery you can add

如果你对 jQuery 感到舒服，你可以添加

$(window).resize(function(){
  console.log($(window).width());
}); 

to get the current screen size. Add a few extra pixels for good measure.

获取当前屏幕大小。添加一些额外的像素以获得良好的测量效果。

回答by nwalton

The first Twitter Bootstrap code referenced by @cjlarose assumes that you've built your main CSS for a display that is between 980px and 1200px wide, so you're essentially starting with the desktop design and adapting all of the others from it.

@cjlarose 引用的第一个 Twitter Bootstrap 代码假设您已经为 980 像素到 1200 像素宽的显示器构建了主 CSS，因此您基本上是从桌面设计开始，并从中调整所有其他内容。

I'm glad to see Twitter has changed to "mobile first"in Bootstrap 3. It's one of the most popular approaches to media queries, and the way I prefer to do it. You start from the smallest size rather than from the desktop out.

我很高兴看到 Twitter在 Bootstrap 3 中变成了“移动优先”。这是最流行的媒体查询方法之一，也是我更喜欢的方式。您从最小的尺寸开始而不是从桌面开始。

Note that your particular site may need different queries than what are listed there or on any other list. You should add queries as your contentdemands, not based on any set template.

请注意，您的特定站点可能需要与此处或任何其他列表中列出的查询不同的查询。您应该根据内容需求添加查询，而不是基于任何设置的模板。

Here are some media queries I've found most useful. These are just some examples:

以下是我发现最有用的一些媒体查询。这些只是一些例子：

/* Start with baseline CSS, for the smallest browsers. 
   Sometimes I put this into a separate css file and load it first.
   These are the "mobile first" styles. */

...


/* Then progressively add bigger sizes from small to large */

/* Smartphones start somewhere around here */
@media (min-width: 300px) {
}

/* You might do landscape phones here if your content seems to need it */
@media (min-width: 450px) {
}

/* Starting into tablets somewhere in here */
@media (min-width: 600px) {
}

/* Perhaps bigger tablets */
@media (min-width: 750px) {
}

/* Desktop screen or landscape tablet */
@media (min-width: 900px) {
}

/* A bit bigger if you need some adjustments around here */
@media (min-width: 1100px) {
}

/* Widescreens */
@media (min-width: 1500px) {
}

The most important thing is that you may not need all of these, or you might want to change the numbers depending on what your content looks like. I don't think there are any really hard rules about how many or where to put your breakpoints. I'm doing a site right now that happens to only need one breakpoint because the content is pretty simple, but I've also done sites that look more like the code above.

最重要的是，您可能不需要所有这些，或者您可能想要根据内容的外观更改数字。我认为关于断点的数量或位置没有任何严格的规则。我现在正在做一个网站，它恰好只需要一个断点，因为内容非常简单，但我也做过看起来更像上面代码的网站。

I didn't include the retina display code. That's useful if you're switching out normal-resolution images for high-resolution images on hi-res displays, but otherwise it's not really that useful.

我没有包括视网膜显示代码。如果您在高分辨率显示器上为高分辨率图像切换正常分辨率图像，这很有用，但否则就没有那么有用了。