响应网站上的媒体查询的常见断点 [英] Common breakpoints for media queries on a responsive site
问题描述
所以我在我的第一个响应网站，广泛使用媒体查询。我想知道是否有一些常见的页面宽度我应该优化。
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.
我可能会有一个最大宽度（不完全流体）我想我会有大约3-5集宽度有趣的小CSS3过渡之间（类似如何 CSS技巧的工作原理）。
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 Tricks works).
目前的数字我使用的是有些武断的：
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){...}
此外，我想我已经读过一些移动设备的行为不符合预期（ @media ） 。
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?
推荐答案
在为媒体查询决定断点时，请考虑这些现实：
When deciding on breakpoints for your media queries, consider these realities:
- 在数千种不同设备上有数百种不同的屏幕尺寸。
- 苹果，三星，微软，LG，诺基亚和任何其他设备制造商可以随时更改热门型号的屏幕尺寸。
有这么多视口可能性，匹配断点到特定设备听起来不像一个有效的策略。
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.
更好的方法可能是基于内容设置断点和布局。
通过这种方法，您的网站使用其自然的断点来适应所有视口大小，而不是人为断点目前常见的屏幕尺寸。
With this approach your site uses its natural breakpoints to adapt to all viewport sizes, rather than artificial breakpoints targeting currently common screen sizes.
这种方法很简单，很容易相信：
This method is so simple and easy it may be hard to believe:
- $
- 在缩小浏览器窗口时，请注意网站的回应方式。
- 调整您的网站的屏幕尺寸（这可能与任何设备没有任何关系）。 如果您的布局不再完美，这是您的第一个断点。 >
- 继续缩小浏览器窗口。
- 当您点击下一个布局问题时，这是您的第二个断点。
- em> ...等等。
- 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:
我不知道我们是怎么想出这个短语device-specific
breakpoints无论如何...正如我已经理解它，术语断点
总是参考内容或布局将打破
（即显示有缺陷），因此您需要应用一个媒体查询
。但我想这只是语义，我只是总是认为
在内容
或布局的上下文中引用断点是常识。
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
更多信息（外部网站）：
More information (external sites):
- 为什么不需要设备特定断点
- 在响应式中设置断点设计
- Google Developers：如何选择断点
- 响应式设计的Goldilocks方法
- Viewport Sizes （包含数百个设备和视口大小的列表）
- 标准设备的媒体查询（针对热门设备的媒体查询列表）
- 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)
这篇关于响应网站上的媒体查询的常见断点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
