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

Question

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

3

我对响应式网页设计还很陌生，因为有各种不同的意见关于使用哪些媒体查询和针对哪些设备。是否有一个标准？我想针对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规则）。

- Ahmed Fouad

2个回答

0

你布局中的“断点”很可能会迅速过时，因为市场上会出现具有不同视口比例的新设备。也许与其针对特定设备，我更喜欢在设计中设置断点，以便在需要时进行调整，而不是将设计弯曲到特定设备上。

这篇文章：无关设备的响应式网页设计方法比我能做得更好地解释了它。

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

- Luca

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- serraosays · Accepted Answer

我的想法是，使用媒体查询应该旨在为您的网站创建一个设备无关的框架。这意味着它需要同时考虑分辨率和像素密度，考虑到苹果(和其他公司)推出了超高分辨率屏幕。

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

以下是我全局设置断点的方式:

/* 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和其他博客似乎是跟进的最佳途径。祝你好运。