响应式媒体查询 - 我在哪里放什么代码？答案

【问题标题】：Responsive Media Queries - Where do i put what code?响应式媒体查询 - 我在哪里放什么代码？
【发布时间】：2014-01-10 16:33:40
【问题描述】：

这将是我的第一个完全响应式网站，所以我环顾四周，发现帖子底部的基本媒体查询似乎以某种方式或形式与大多数设备相匹配。

我从这些查询之外的代码开始（即针对普通桌面）。然后我处理了第一个移动媒体查询，但第二个规则对我来说没有意义（即大于 321px 的所有内容）。

这似乎意味着大于 321 到 768 的所有内容，这是下一个规则。我想我误解了这是如何工作的？谁能以足够简单的方式解释这一点？我开始认为我所有的 CSS 代码都应该在这些媒体查询中，我不应该先从移动版本开始，然后随着分辨率变大逐渐扩展它？

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px)
{

}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) and (orientation: landscape)
{

}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)
{

}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)
{

}

/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) and (orientation: landscape)
{

}

/* Large screens ----------- */
@media only screen and (min-width : 1824px)
{

}

【问题讨论】：

你似乎明白了，第二条规则意味着任何具有横向方向的设备都将遵循该媒体查询中的内容，然后查询之外的任何内容都将覆盖它，因此下一个媒体查询将使用。如果您在媒体查询之外没有代码，则不会在 1024px 和 1224px 之间应用任何样式，因为您在第三条规则中有一个最大值。
感谢 gaynorvader，我说得对，即使有方向规则，它也必须遵守屏幕尺寸规则。 IE。横向 + 屏幕尺寸不超过 321 像素？
@Jaques Thaat 是正确的。

标签： css responsive-design media-queries

【解决方案1】：

媒体查询的目的是改变元素，使它们在特定的窗口/屏幕尺寸下看起来不错。
移动优先设计开始流行。本质上，开发人员创建要在移动设备上优化（外观和行为最佳）的网站。接下来，他逐渐在他的 css 末尾插入媒体查询以覆盖原始 css。他这样做是为了使页面适应用户的窗口/屏幕大小，从而获得更好的体验。

这是一个例子：

.ImageGalleryItems {
  float: none;
  clear: both;
  background-color: black;
}
@media only screen and (min-width: 768px) {
  float: left;
  background-color: white;
}

现在，只要用户的屏幕尺寸大于 768 像素，图像项就会向左浮动，而不是彼此相邻显示。此外，背景颜色也会改变。

这是您可以使用的原则。如果您首先为移动设备开发，请不要在原始 css 中添加 :hover 效果，因为这些效果不适用于移动设备。然后，使用媒体查询为桌面添加这些效果。这样可以节省数据使用量并创建更简洁的代码。

【讨论】：

感谢 Derek，关于悬停状态的要点。我了解了基本规则，但我认为令人困惑的是如何知道要满足哪些屏幕尺寸。 321px 似乎是 iPhone4 的常见纵向尺寸，但您是否会为三星 s3 和三星 Note 2 添加另一条规则？或者，我们是否正在查看一个范围，然后依靠流体网格来完成其余的工作？ IE。 321px 可以有一套规则然后把 s3 和 Note2 组合在一起？

【解决方案2】：

我觉得你有点过头了。减少媒体查询的数量，并在您的设计以某种方式“中断”的地方添加一些断点。

考虑在查询中放入什么：一种方法是编写某种形式的通用 CSS，然后覆盖媒体查询中的一些属性。另一种方法是简单地跳过常规 CSS 中的“交替”属性并将其设置在每个查询中。

所以：您不会在媒体查询中编写所有 CSS。只是你想要改变的东西。

【讨论】：

【解决方案3】：

实际上没有必要将所有内容都放在媒体查询中。媒体查询仅适用于该查询范围内的设备和/或屏幕尺寸。

@media 1 不一定会影响@media 2。

注意：您还可以将媒体查询放在逗号分隔的列表中以节省时间。

这就是我在我的网站上的做法：

 /* styles for desktops */
 body{width:100%;}

 img{width:100%;} /* and so on */


@media handheld and (max-width: 960px),

screen and (max-width: 960px),

only screen and (min-device-width : 768px) and (max-device-width : 1024px),

only screen and (min-device-width : 320px) and (max-device-width : 480px),

only screen and (-webkit-min-device-pixel-ratio : 1.5),

only screen and (min-device-pixel-ratio : 1.5)

{
     /*Styles for non desk-tops*/
     /*You Only Need to put styles you want to change in here*/
     img{width:90%;}
}

我希望这会有所帮助。

【讨论】：

谢谢，我没想过像这样链接规则。

【解决方案4】：

大部分只是同意已经说过的话：您正在设计介于尺寸之间，而不是针对特定尺寸。要记住的最重要的事情是以百分比而不是固定宽度布置所有内容。这样做的结果是，您实际上应该只需要三个查询：一个用于台式机，一个用于平板电脑，一个用于移动设备。

【讨论】：

【解决方案5】：

这是相当多的媒体查询 - 我会考虑您是否真的需要所有这些。

您可以先从移动设备或桌面设备处理这些问题。真的没什么区别。

我建议看看 Bootstrap 使用哪些媒体查询作为默认值。

http://twitter.github.com/bootstrap/scaffolding.html#responsive

【讨论】：

【解决方案6】：

始终在桌面和移动设备上使用媒体查询，因为如果你不这样做，整个 CSS 将呈现到浏览器上，占用空间并减慢你的网页（不多，但如果你有一个大的 web 应用程序可能会变得很大）。所以我的建议是为桌面和移动设备设置媒体查询。因此，当它加载时，它只加载与规范有关的媒体查询，没有额外的或无用的。

【讨论】：