2

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

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

这似乎意味着大于 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)
{

}
4

6 回答 6

6

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

这是一个例子：

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

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

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

于 2013-03-21T14:50:14.690 回答
2

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

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

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

于 2013-03-21T14:37:48.530 回答
1

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

@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%;}
}

我希望这有帮助。

于 2013-03-21T15:37:24.527 回答
1

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

于 2013-08-04T16:19:52.820 回答
0

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

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

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

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

于 2013-03-21T14:39:18.653 回答
0

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

于 2014-01-10T08:33:40.117 回答