css - 正确的级联媒体查询？/屏幕调整大小/刷新时的奇怪媒体查询行为

Question

我继承了一个大型网站，它是静态、自适应和响应的混合体。响应式媒体查询有大量重叠区域

@media only screen and (min-width: 300px) { /random code }

在页面的下方；

@media only screen and (max-width: 400px) { /more random code }

所以在 350px 时，两者都应该触发？

因此，在调整浏览器窗口大小时，我遇到了一些奇怪的行为，即查询会触发，但随后以该大小刷新页面时，级联表中较高的媒体查询会触发。但是在调整大小时，会触发适当的级联媒体查询。

我正在努力使网站从桌面向下响应，所以我将所有媒体查询重写为(最大宽度)，例如；

@media only screen and (max-width: 600px) { /random code }
@media only screen and (max-width: 500px) { /random code }
@media only screen and (max-width: 400px) { /random code }

然而，即使在其他网站上它工作正常，我仍然在使用此方法的网站的其他部分出现奇怪的行为。 (即以 550 像素刷新并触发“@media only screen and (max-width: 400px)”。)

这让我想知道我是否以正确的方式使用它们。许多站点对如何正确使用媒体查询的答案相互矛盾。我开始觉得它应该是这样的；

@media only screen and (min-width: 501px and max-width: 600px) { /random code }
@media only screen and (min-width: 401px and max-width: 500px) { /random code }
@media only screen and (max-width: 400px) { /random code }

但是，这不是与 CSS 的层叠方面背道而驰吗？

Answer 1

• 自适应设计 = 服务器端解决方案，即单独的网址/域用于移动网站。
• 响应式设计 = 客户端解决方案，即媒体查询。

看来您正在处理响应式网站。没有一种“正确的方法”可以做到这一点，这在很大程度上是一种偏好问题。我喜欢做“移动优先”的风格，只使用最小宽度；

// Media Queries
$mobile-landscape: "(min-width: 480px)";
$tablet-portrait: "(min-width: 768px)";

$desktop: "(min-width: 1024px)";
$widescreen: "(min-width: 1280px)";
$QHD: "(min-width: 2560px)";

$retina: "(-webkit-min-device-pixel-ratio: 2) and (min-resolution: 2dppx)";
$non-retina: "-webkit-max-device-pixel-ratio: 1";

然后，当您为不同的断点覆盖样式时，您总是最后列出较大的断点。

footer {
  letter-spacing: 2.5px;
  margin: 10em auto 0;
  position: relative;
  transition: opacity $slow;
  @media #{$tablet-portrait} {
    height: 2.75em;
    margin-top: -2.75em;
    width: 768px;
  }
  @media #{$desktop} {
    width: 1024px;
  }
  @media #{$widescreen} {
    width: 1280px;
  }
}