CSS 响应式站点上媒体查询的常见断点
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8564752/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Common breakpoints for media queries on a responsive site
提问by Zach Lysobey
So I am working on my first responsive website which makes extensive use of media queries. I was wondering if there are some common page-widths I should optimize for.
所以我正在开发我的第一个响应式网站，该网站广泛使用了媒体查询。我想知道是否有一些我应该优化的常见页面宽度。
I will probably have a maximum width (not going full fluid) I am thinking I'll have maybe 3-5 set widths with fun little CSS3 transitions between them (similar to how CSS Tricksworks).
我可能会有一个最大宽度（不会完全流动）我想我可能会有 3-5 个设置宽度，它们之间有有趣的小 CSS3 过渡（类似于CSS Tricks 的工作方式）。
Currently the numbers I am using are somewhat arbitrary:
目前我使用的数字有点随意：
@media all and (max-width: 599px){...}
@media all and (min-width: 600px) and (max-width:799px){...}
@media all and (min-width: 800px) and (max-width:1024px){...}
@media all and (min-width: 700px) and (max-width: 1024px){...}
@media all and (min-width: 1025px) and (max-width: 1399px){...}
@media all and (min-width: 1400px){...}
Also, I think I have read that some mobile devices don't behave as expected (with @media). Where does this come into play and how should I deal with these situations?
另外，我想我已经读到某些移动设备的行为不符合预期（使用@media）。这在哪里发挥作用，我应该如何处理这些情况？
采纳答案by Michael Benjamin
When deciding on breakpoints for your media queries, consider these realities:
在决定媒体查询的断点时，请考虑以下现实情况：
- There are hundreds of different screen sizes across thousands of different devices.
- The future will bring new screen sizes.
- Apple, Samsung, Microsoft, LG, Nokia and any other device manufacturer can, at any time, change the screen size of their popular models.
- 在数千种不同的设备上有数百种不同的屏幕尺寸。
- 未来将带来新的屏幕尺寸。
- Apple、Samsung、Microsoft、LG、Nokia 和任何其他设备制造商都可以随时更改其流行机型的屏幕尺寸。
With so many viewport possibilities, matching breakpoints to specific devices doesn't sound like an efficient strategy. Just keeping up with what's popular, what's new, and what's changed will be a never-ending task.
有如此多的视口可能性，将断点匹配到特定设备听起来并不是一个有效的策略。跟上流行的、新的和变化的内容将是一项永无止境的任务。
A better approach may be to set breakpoints based on content and layout.
更好的方法可能是根据内容和布局设置断点。
With this approach your site uses its natural breakpoints to adapt to allviewport sizes, rather than artificial breakpoints targeting currently common screen sizes.
通过这种方法，您的站点使用其自然断点来适应所有视口尺寸，而不是针对当前常见屏幕尺寸的人工断点。
This method is so simple and easy it may be hard to believe:
这个方法简单易行，可能让人难以置信：
- Run your website on a desktop or laptop.
- As you narrow the browser window, notice how the website responds.
- When you reach the point where your layout is no longer perfect, that's your first breakpoint.
- Adjust your site for that screen size (which may have no relation to any device).
- Keep narrowing the browser window.
- When you hit the next layout problem, that's your second breakpoint.
- ... and so on and so forth.
- 在台式机或笔记本电脑上运行您的网站。
- 当您缩小浏览器窗口时，请注意网站的响应方式。
- 当您到达布局不再完美的点时，这就是您的第一个断点。
- 针对该屏幕尺寸调整您的网站（可能与任何设备无关）。
- 不断缩小浏览器窗口。
- 当您遇到下一个布局问题时，这就是您的第二个断点。
- ... 等等等等。
Of course, if you're designing mobile-first, then the process goes in reverse: Start with a narrow screen and work your way out.
当然，如果您设计的是移动优先，那么这个过程会反过来：从窄屏幕开始，然后按照自己的方式进行。
With natural breakpoints you no longer need to focus on a giant universe of viewport sizes because your site will adapt to any device, both now and in the future.
使用自然断点，您不再需要关注视口大小的巨大世界，因为您的站点现在和将来都将适应任何设备。
According to one developer, this approach brings breakpoints full-circle to their original intent:
据一位开发人员称，这种方法使断点完全符合其初衷：
I'm not sure how we ever came up with the phrase "device-specific breakpoints" anyhow... As I've understood it, the term "breakpoint" was always a reference to where the content or layout would "break" (i.e. appear flawed) and thus you'd need to apply a media query at that point. But I guess that's just semantics, I just always thought it was common sense to refer to breakpoints in the context of content or layout.
~ Louis Lazaris, ImpressiveWebs
我不确定我们是如何想出“特定于设备的断点”这个词的……正如我所理解的，术语“断点”总是指内容或布局将“中断”的位置（即出现缺陷），因此您需要在那时应用媒体查询。但我想这只是语义，我一直认为在内容或布局的上下文中引用断点是常识。
~ Louis Lazaris, ImpressiveWebs
来源：https: //responsivedesign.is/articles/why-you-dont-need-device-specific-breakpoints#comment-1685967450
More information (external sites):
更多信息（外部网站）：
- Why You Don't Need Device Specific Breakpoints
- Setting Breakpoints in Responsive Design
- Google Developers: How to choose breakpoints
- The Goldilocks Approach to Responsive Design
- Viewport Sizes(a list of hundreds of devices and viewport sizes)
- Media Queries for Standard Devices(a list of media queries targeting popular devices)
- 为什么不需要设备特定的断点
- 在响应式设计中设置断点
- Google Developers：如何选择断点
- 响应式设计的金发姑娘方法
- 视口大小（数百个设备和视口大小的列表）
- 标准设备的媒体查询（针对流行设备的媒体查询列表）
回答by Drew Gaynor
- This is a pretty useful guide for mobile screen sizes.
- Great guide for stats on screen resolutions
- Google Analytics data on resolutions can be valuable as well, if you have access to it.
- 这是一个非常有用的移动屏幕尺寸指南。
- 屏幕分辨率统计数据的绝佳指南
- 如果您可以访问 Google Analytics（分析）关于分辨率的数据，它也很有价值。
Also, I would definitely recommend using device-widthfor your mobile sizes, unless you want users to see your mobile styles when they resize their browser window on a non-mobile device. widthis the width of the viewport, and device-widthis the current resolution of the device.
此外，我绝对建议您使用device-width移动设备尺寸，除非您希望用户在非移动设备上调整浏览器窗口大小时看到您的移动样式。width是视口的宽度，device-width是设备的当前分辨率。
Also, I think I have read that some mobile devices don't behave as expected (with @media).
另外，我想我已经读到某些移动设备的行为不符合预期（使用@media）。
You are correct. Many devices will not give you the widthor device-widththat you expect, especially when switching between landscape and portrait (they will often give the landscape width when in portrait). Device auto-zooming can also throw a wrench into things. Using the viewport meta tagcan help with many of these issues. (More info on that here)
你是对的。许多设备不会给你width或device-width你所期望的，特别是在横向和纵向之间切换时（他们通常会在纵向时提供横向宽度）。设备自动缩放也可以把扳手扔进东西里。使用视口元标记可以帮助解决许多这些问题。（更多信息在这里）
回答by doubleJ
This is what I use...
这是我用的...
@media screen and (max-width:320px) {}
@media screen and (min-width:321px) and (max-width:639px) {}
@media screen and (min-width:640px) and (max-width:959px) {}
@media screen and (min-width:960px) and (max-width:1279px) {}
@media screen and (min-width:1280px) and (max-width:1599px) {}
@media screen and (min-width:1600px) {}
@media screen and (min-width:1920px) {}
@media print {}
There are all kinds of others in there, as appropriate (min-width without max-width or max-width without min-width), but this is my base setup.
那里有各种其他的，视情况而定（没有最大宽度的最小宽度或没有最小宽度的最大宽度），但这是我的基本设置。
Personally, I never understood the odd widths that a lot of people use. For instance, 320 and uphas Five CSS3 Media Query increments: 480, 600, 768, 992 and 1382px.
就我个人而言，我从不理解很多人使用的奇数宽度。例如，320 及以上有五个 CSS3 媒体查询增量：480、600、768、992 和 1382px。
That doesn't make any sense to me. Logical breaks are at intervals of 320px (320, 640, 960, 1280, 1600, 1920). Note that these breaks can give a slightly different layout for pretty much any device in either orientation (omnia is 240x400, iphone is 320x480, droid x is 480x858, ipad is 768x1024, galaxy s3 is 720x1280, and they are talking 1920x1080 tablets).
这对我来说没有任何意义。逻辑中断的间隔为 320 像素（320、640、960、1280、1600、1920）。请注意，这些中断可以为几乎任何方向的几乎任何设备提供略有不同的布局（omnia 是 240x400，iphone 是 320x480，droid x 是 480x858，ipad 是 768x1024，galaxy s3 是 720x1280，他们正在谈论 8020x1020 平板电脑）。
JJ
杰杰
回答by bigblind
some resolutions to look for:
一些需要寻找的解决方案：
iphone screen (a lot of other smartphones have similar screen sizes: 960-by-640-pixel resolution at 326 ppi http://www.apple.com/iphone/specs.html
iphone 屏幕（许多其他智能手机具有类似的屏幕尺寸：960 x 640 像素分辨率，326 ppi http://www.apple.com/iphone/specs.html
ipad screen (a lot of other tablets have similar screen sizes 1024-by-768-pixel resolution at 132 pixels per inch (ppi) http://www.apple.com/ipad/specs/
ipad 屏幕（许多其他平板电脑的屏幕尺寸相似，分辨率为 1024 x 768 像素，每英寸 132 像素 (ppi) http://www.apple.com/ipad/specs/
'normal' screen a lot of normal screens also have a 1024-by-768-pixels resolution, according to: http://www.w3schools.com/browsers/browsers_display.aspbut I'm not vouching for their trustworthyness.
“普通”屏幕 许多普通屏幕也有 1024 x 768 像素的分辨率，根据：http: //www.w3schools.com/browsers/browsers_display.asp但我不保证它们的可信度。
I'm looking for more data now.
我现在正在寻找更多数据。
