特定于设备的@media 查询似乎不起作用答案

【问题标题】：Device-Specific @media queries don't seem to work特定于设备的@media 查询似乎不起作用
【发布时间】：2021-06-24 21:36:48
【问题描述】：

大家好

我正在使用“主要”媒体查询将所有主要更改从桌面定位到移动设备（scss）：

// media breakpoint variables
$mob-exslim: 320px;
$mob-slim: 360px;
$mob-regular: 375px;
$mob-medium: 390px;
$mob-plus: 414px;
$mob-large: 428px;

@media screen and (min-width: $mob-exslim) and (max-width: 1020px) {
  .contact-indicator {
    display: none;
  }
  .hero-wrap {
    margin-top: 70px;
    overflow-x: hidden;
    // disable left side of the hero
    .left-side {
      display: none;
      .main-img {
        display: none;
      }
      .hero-arrow {
        display: none;
      }
    }

    // disable the right side of the hero
    .right-side {
      display: none;
      .main-heading {
        display: none;
      }
      .hero-descrip {
        display: none;
      }
      .button-wrap {
        display: none;
        .hero-btn {
          display: none;
        }
        .btn-arrow {
          display: none;
        }
      }
    }
    .mobile-title {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      .flex-left {
        min-width: 100vw;
        width: 100vw;
        max-width: 100vw;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-end;
        .mobile-h2 {
          position: absolute;
          right: 19px;
          font-size: 33px;
          font-weight: 300;
          text-align: right;
          max-width: 298px;
          width: 298px;
          min-width: 298px;
          margin: 8px 0 0 0;
          padding: 0;
        }
        .mobile-hero-img {
          max-width: 355px;
          margin-right: -140px;
        }
      }
      .mobile-hero-p {
        margin-left: -45px;
        font-size: 15.5px;
        margin-top: 55px;
        max-width: 272px;
        line-height: 26px;
      }
      .mobile-hero-btn {
        margin-top: 45px;
        min-width: 191px;
        max-width: 191px;
        min-height: 53px;
        height: 53px;
        max-height: 53px;
        border-radius: 14.5px;
        background-color: $grid-black;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #fff;
        text-decoration: none;
        cursor: pointer;
      }
    }
  }
}

然后，当我尝试更具体地使用这样的视口时：

// 375PX WIDTH & 667PX HEIGHT -- iPHONE 6,7,8
@media screen and (min-width: $mob-regular) and (max-width: 389px),
  screen and (min-height: 667px) and (max-height: 667px) {
  .hero-wrap {
    margin-top: 65px;
  }
  .mobile-title {
    .mobile-hero-p {
      margin-top: 40px;
    }
  }
}


// 375PX WIDTH & 812PX HEIGHT -- iPHONE X, XS, 11 PRO
@media screen and (min-width: $mob-regular) and (max-width: 389px),
  screen and (max-height: 812px) {
  .mobile-title {
    .mobile-hero-p {
      margin-top: 70px;
    }
  }
}

最后两个媒体查询似乎没有注册。

如果有帮助，所有代码都可以在 github 上找到：https://github.com/DesignedByNino/gridbase-studio 在 'css/index.scss' 下的 'src' 文件夹中。
这个项目使用 vue.js - 但它与问题并不完全相关，只是让你看看是否知道。

提前感谢您的所有回答！

【问题讨论】：

您在您提供的第一个代码 sn-p 的末尾缺少}。
@ManasKhandelwal 谢谢你指出它，但不幸的是，我只是将它从 vs 代码复制粘贴到这个网站，实际的代码库包括最后一个括号'}'。
@ManasKhandelwal 你可以看看整个项目，我把它托管在 github 上，问题描述中有一个链接。

标签： css sass media-queries

【解决方案1】：

As mdn says:

典型的移动优化网站包含以下内容：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width 属性控制视口的大小。可以设置为特定数量的像素，例如 width=600 或特殊值 device-width，以 CSS 像素为单位的屏幕宽度比例为 100%。（有对应的height和device-height 值，这对于具有改变大小的元素的页面可能很有用或基于视口高度的位置。）

initial-scale 属性控制页面缩放时的缩放级别第一次加载。最大规模、最小规模和用户可扩展属性控制如何允许用户放大或缩小页面。

然后你就可以使用你的媒体查询了：

@media (min-height: 768px) and (max-height: 768px) 
     and (min-width: 1366px) and (max-width: 1366px) {

}

更新：

我创建了一个简化示例：

@media screen and (min-width: 320px) and (max-width: 1020px)
  and (min-height: 813px)
{
  .mobile-title {
    background-color: lightgreen;
  }
}


@media screen and (min-width: 375px) and (max-width: 389px),
  screen and (min-height: 0px) and (max-height: 667px) {
    .mobile-title {
      background-color: lightpink;
    }
}



@media screen and (min-width: 375px) and (max-width: 389px),
  screen and (min-height: 668px) and (max-height: 812px) {
    .mobile-title {
      background-color: lightgoldenrodyellow;
    }
}

  <div class="mobile-title">
    A title
  </div>

【讨论】：

感谢您的回答，但是`meta`标签已经存在并且工作正常，第一个媒体查询工作得很好，当我尝试实现其他更具体的时，它没有被注册.很奇怪，因为 css 从上到下工作，所以最后的规则集应该覆盖第一个媒体查询中的顶部。
@NinoP 请看我更新的答案。我创建了一个简化的示例并使用不同的设备进行了检查。您可以根据自己的要求进行调整。
再次感谢@StepUp 的关注，但不幸的是它在我的项目中不起作用。我要做的是根据设备高度调整 2 个元素、一个段落和一个 div 父元素的上边距（假设 iPhone X 具有更高的显示 - 高度：812px - 比 iPhone 6,7， 8，- 高度：667 像素 - 但它具有相同的视口宽度 375 像素），因此主要 CTA 按钮仍显示在网站折叠上方。

【解决方案2】：

在 Chrome 开发工具中使用了一段时间后，我发现我尝试使用设备特定媒体查询定位的样式没有注册，因为我在 SCSS 中对最后一个媒体查询不够具体。

【讨论】：