响应式站点上媒体查询的常见断点 [英] 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:
- 在数千种不同的设备上有数百种不同的屏幕尺寸.
- 未来将带来新的屏幕尺寸.
- 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.
更好的方法可能是根据内容和布局设置断点.
通过这种方法，您的网站使用其自然断点来适应所有视口尺寸，而不是针对当前常见屏幕尺寸的人工断点.
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:
- 在台式机或笔记本电脑上运行您的网站.
- 当您缩小浏览器窗口时，请注意网站的响应方式.
- 当您的布局不再完美时，这就是您的第一个断点.
- 针对该屏幕尺寸(可能与任何设备无关)调整您的网站.
- 不断缩小浏览器窗口.
- 当您遇到下一个布局问题时，这就是您的第二个断点.
- ...等等.
当然，如果您设计的是移动优先，那么这个过程会反过来:从窄屏幕开始，然后按照自己的方式进行.
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
<小时>
更多信息(外部网站):
More information (external sites):
- 为什么不需要特定于设备的断点
- 在响应式设计中设置断点
- Google Developers:如何选择断点
- 响应式设计的金发姑娘方法
- 视口尺寸(数百种设备和视口尺寸的列表)
- 标准设备的媒体查询(a针对流行设备的媒体查询列表)
- 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屋！
