Question

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

我从任何这些查询之外的代码开始（即针对普通桌面）。然后我研究了移动设备的第一个媒体查询，但第二个规则对我没有意义（即一切都超过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)
{

}

Answer 1

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

以下是一个例子：

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

现在，每当用户的屏幕尺寸大于768px时，图像项目将向左浮动而不是彼此相邻显示。此外，背景颜色将改变。

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

Answer 2

我认为你有点过分了。减少媒体查询的数量，并在某些方面添加一些设计“中断”的断点。

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

所以：你没有在媒体查询中写下你所有的CSS。只是你要改变的事情。

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

我希望这会有所帮助。

Answer 4

大多只是同意已经说过的内容：你正在设计之间的而不是特定尺寸。要记住的最重要的事情是以百分比而不是固定宽度来铺设所有东西。这样做的结果是你真的只需要三个查询：一个用于桌面，一个用于平板电脑，一个用于移动。

Answer 5

这是一些媒体查询 - 我会考虑你是否真的需要所有这些。

您可以先从移动设备或桌面设备进行处理。真的没什么区别。

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

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

Answer 6

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

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

6 个答案: