媒体查询应该针对哪些设备/推荐尺寸？

Question

我是响应式网页设计的新手，我很困惑，因为对于使用哪些媒体查询和定位哪些设备存在各种偏好。有标准吗？我想定位 iPhone、iPad 和其他流行设备。

我在网上找到了这个：

/* 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 and high pixel ratio devices ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

但我不知道它是否过时了。我不知道哪个规则针对 iPhone 4，因为我运行了 iPhone 模拟器并且 CSS 不起作用（参考最后一个 CSS 规则）。

Answer 1

我对媒体查询的看法是，您的目标应该是为您的网站创建一个与设备无关的框架。这意味着它需要同时具备分辨率和像素密度意识，因为苹果（和其他公司）正在推进超高分辨率屏幕。

2018 年更新：我的方法现在放弃了 screen 和 min-device-pixel-ratio 媒体属性并使用屏幕尺寸范围。因为现在每个设备都注册为screen，而且现在几乎所有设备都是高分辨率的——你真的不需要这些属性。如果你在一个超高流量的网站上，也许它们仍然有意义。

这是我在全局范围内布置断点的方式：

/* Below 380px is really just the iPhone SE at this point */

@media (min-width: 380px) and (max-width: 480px) {
  /* Most phones fall in here - iPhone, Galaxy, Pixel, etc */
}

@media (min-width: 480px) and (max-width: 768px) { 
  /* Phablets and Tablets - iPad, Galaxy Note, Pixel Slate, Fire */
}

@media (min-width: 768px) and (max-width: 980px) { 
  /* Small desktop, large tablet - Macbooks, sub 12" ultrabooks */
}

@media (min-width: 980px) and (max-width: 1200px) { 
  /* Medium screen desktop (up to about 24") and laptops (13" laptops) */
}

@media (min-width: 1200px) and (max-width: 1600px) {
  /* Large screen desktop (27"), laptops (15+") */
}

@media (min-width: 1600px) { 
  /* Very large screen, 4K desktop + small TVs */
}

2012 年建议：我看到了来自 Chris Coyier 的 CSS-tricks.com 的双重任务： http://css-tricks.com/snippets/css/retina-display-media-query/

这个概念是根据大小创建初始断点，然后进行像素密度媒体查询。这种方法为您提供了三个断点，每个断点都有一个像素密度感知选项。

这是 Coyier 的示例代码（我简化了供应商特定的前缀，以便您掌握概念）：

@media only screen and (min-width: 320px) {
  /* Small screen, non-retina */
}

@media only screen and (min-device-pixel-ratio: 2) and (min-width: 320px) { 
  /* Small screen, retina, stuff to override above media query */
}

@media only screen and (min-width: 700px) {
  /* Medium screen, non-retina */
}

@media only screen and (min-device-pixel-ratio: 2) and (min-width: 700px) {
  /* Medium screen, retina, stuff to override above media query */
}

@media only screen and (min-width: 1300px) {
  /* Large screen, non-retina */
}

@media only screen and (min-device-pixel-ratio: 2) and (min-width: 1300px){ 
  /* Large screen, retina, stuff to override above media query */
}

我非常喜欢这个概念：您可以为较旧的、可能带宽受限的设备节省带宽，同时为新的高分辨率设备提供他们需要的东西。您必须在像素密度媒体查询中添加的唯一代码应该是背景图像内容，因此高分辨率图像会覆盖旧设备上的像素化​​对应物。

意识到你正试图击中一个移动的目标，我的朋友；）这是一个不断发展的概念，css-tricks.com、stackoverflow 和其他博客似乎是跟上步伐的最佳方式。祝你好运。

Answer 2

随着具有不同视口比率的新设备上市，您布局中的“断点”可能很快就会过时。也许比起针对特定设备，我更喜欢在您希望中断的设计中设置断点的方法，而不是将您的设计弯曲到特定设备。

这篇文章：Device-Agnostic Approach To Responsive Web Design 解释得比我做得更好。

或者，您可以参考一些最流行的框架，例如 320 and Up 或 Twitter Bootstrap - 它们会经常更新，应该为您提供一个良好的媒体查询断点起点。