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

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时,图像项将向左浮动而不是彼此相邻显示.此外,背景颜色将改变.

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