Question

我创建了多个@media查询来尝试捕获不同的显示。我正在使用chrome开发人员工具，每当我切换显示大小时，它默认使用的是CSS中最低的媒体查询。我最初的解决方案是放下最小的波纹管，但是现在当我用显示器测试时，它说使用的是1440px而不是1920px。因此，我解决了有关移动设备的问题，但已使用监视器重新创建了它。我该如何解决这个问题？

2286BowmanRoad.com

CSS示例下面，它从高到低复制并包含

底部->顶部360、375、450、680、780、1054、1366、1440、1680、1920、2560、3840

 /* Start of Media only <1920 -------------------------------------------------------------------------------------------------------------------------- */
  @media only screen and (max-width: 1920px) { 

    .fancyText { font-size: 2em; }
    .smallerHeadline { font-size: 1.3em; }
    .content {border-top:8px; margin: 0px; padding: 0px;  width: 100%; }    .footer { font-size: 0.8em; float: left; width: 100%; margin: 0px; padding-top: 35px; padding-bottom: 35px; letter-spacing: 1pt; }
    .headline { letter-spacing: 0pt; font-size: 1.5em; }
    .Wrap { max-width:1050px; padding-top: 15px; padding-bottom: 15px; }
    .imageHeader { font-size: 1.5em; }

  }
 /* End of Media only <1920 -------------------------------------------------------------------------------------------------------------------------- */

 /* Start of Media only <1680 -------------------------------------------------------------------------------------------------------------------------- */
 @media only screen and (max-width: 1680) { 

    .fancyText { font-size: 2em; }
    .smallerHeadline { font-size: 1.3em; }
    .content {border-top:8px; margin: 0px; padding: 0px;  width: 100%; }    .footer { font-size: 0.8em; float: left; width: 100%; margin: 0px; padding-top: 35px; padding-bottom: 35px; letter-spacing: 1pt; }
    .headline { letter-spacing: 0pt; font-size: 2em; }
    .Wrap { max-width:1050px; padding-top: 15px; padding-bottom: 15px; }
    .imageHeader { font-size: 1.5em; }

 }
 /* End of Media only <1680 -------------------------------------------------------------------------------------------------------------------------- */

 /* Start of Media only <1440 -------------------------------------------------------------------------------------------------------------------------- */
  @media only screen and (max-width: 1440px) { 

    .fancyText { font-size: 2em; }
    .smallerHeadline { font-size: 1.3em; }
    .content {border-top:8px; margin: 0px; padding: 0px;  width: 100%; }    .footer { font-size: 0.8em; float: left; width: 100%; margin: 0px; padding-top: 35px; padding-bottom: 35px; letter-spacing: 1pt; }
    .headline { letter-spacing: 0pt; font-size: 2em; }
    .Wrap { max-width:1050px; padding-top: 15px; padding-bottom: 15px; }
    .imageHeader { font-size: 1.5em; }

  }
 /* End of Media only <1440 -------------------------------------------------------------------------------------------------------------------------- */

Answer 1

您的媒体查询结构不正确。您可以将与每个查看端口相对应的所有css分组，也可以针对各个类定位媒体查询。这是查看正确结构和顺序示例的指南。

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width

Answer 2

为将来提供参考，请提供有关您的问题的更多详细信息。如果您能够共享不起作用的CSS代码，那么它会更有帮助，以便我们与您一起解决问题。

我的第一个直觉是您没有正确使用媒体查询，下面是几个示例供您查看：

@media only screen and (min-device-width: 960px) {
  #wrapper { width: 70%; }
}

@media only screen and (max-device-width: 960px) {
  #wrapper { width: 100%; }
}

对于屏幕宽度大于或等于960px的任何设备，将激活第一个媒体查询，而当屏幕宽度小于或等于960px时，将激活第二个媒体查询。

如果可以的话，请更新您的帖子，其中提供有关具体工作原理的更多详细信息以及一些CSS示例，以便我们帮助您解决问题。

@media查询排序问题

2 个答案: