Question

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

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

并进一步向下;

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

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

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

我正在努力使网站从桌面向下响应，所以我将所有媒体查询重新编写为（max-width），例如;

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

然而，我仍然使用这种方法在网站的其他部分出现奇怪的行为，即使在其他网站上它工作正常。（即，在550px和＆＃39; @media only屏幕刷新并且（最大宽度：400px）＆＃39;正在被解雇。）

让我想知道我是否以正确的方式使用它们。许多网站在如何正确使用媒体查询方面存在矛盾的答案。我开始觉得应该是这样的感觉;

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

Answer 2

好的，我会同意@Michael的评论，并在解决了我的问题并经过一些研究之后对其进行了扩展。我也会调整标题，以防其他人在这个问题上遇到麻烦。

首先我的媒体查询被覆盖的问题 - 是我的错误。我没有在这个项目上使用SCSS或者咕噜声，所以我错过了一个额外的关闭支架，让铬和铬检查员感到困惑。

#div {
   default code
}

@media only screen and (max-width:450px) {**}**
    #div {
        media query code;
    }
}

因此，当页面加载到430px时，错误的媒体查询代码覆盖了默认代码。然后，当我刷新/调整页面大小时，chrome吓坏了。 Inspector列出了媒体查询（所以我认为没有错误）但是媒体查询代码被划掉了，好像它被另一个查询覆盖了一样。所以使用验证器。

至于正确使用媒体查询，我同意@Michael认为 I 感觉使用

(min-width: Mpx)

（设计移动设备时）或

(max-width: Dpx)

（设计桌面时）完全是比定义范围更好的DRY方法

(min-width: Xpx and max-width: Ypx)

因为改变一个媒体查询的范围将意味着改变至少一个其他媒体查询的范围。此外，我觉得这里给出的其他答案的范围是自适应（尽管自适应/响应的定义似乎在整个网络上模糊）。

我注意到一些使用这些范围的网站在这些设备上看起来不错，但是测试不同的分辨率（以及谁可以猜测未来的范围？！）这些网站看起来只是裁剪或破坏。但也许他们只是错误地实施了......

通过响应式网站（可能具有弹性？），通过眼睛定义内容即将中断的媒体查询，似乎不仅直观，而且适用于任何未来设备。内容总是按比例缩放到屏幕上，而不是以预定（主要是苹果）设备宽度为块。

所以我一直只使用

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

因为它的DRY（并且SCSS会更多）和首先针对桌面的默认代码比首先启动移动设备更容易转换为IE8。

我希望将来可以帮助某人。

Answer 3

它是响应式媒体查询的SASS代码。你会从中得到想法。

@mixin responsive($device)


  @if $device == small-mobile
    @media only screen and (max-width: 576px)
      @content

  @if $device == mobile
    @media only screen and (max-width : 767px)
      @content

  @if $device == tab-portrait-device
    @media only screen and (min-device-width : 768px) and (max-device-width : 959px)
      @content

  @if $device == tab-portrait
    @media only screen and (min-width : 768px) and (max-width : 959px)
      @content

  @if $device == tab-landscape-device
    @media only screen and (min-device-width : 960px) and (max-device-width: 1239px)
      @content

  @if $device == tab-landscape
    @media only screen and (min-width : 960px) and (max-width: 1239px)
      @content

  @if $device == desktop
    @media only screen and (min-width : 1240px) and (max-width: 1680px)
      @content

  @if $device == big-desktop
    @media only screen and (min-width : 1681px)
      @content

适当的级联媒体查询？ /屏幕上的奇数媒体查询行为调整大小/刷新

3 个答案: