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

Question

大家好

我正在使用 'main' 媒体查询来定位从桌面到移动设备的所有主要更改（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——但是跟问题不完全相关，看一看就知道了。

预先感谢您的所有回答！

Answer 1

As mdn says:

A typical mobile-optimized site contains something like the following:

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

The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width, which is the width of the screen in CSS pixels at a scale of 100%. (There are corresponding height and device-height values, which may be useful for pages with elements that change size or position based on the viewport height.)

The initial-scale property controls the zoom level when the page is first loaded. The maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom the page in or out.

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

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

Answer 2

在 Chrome Dev Tools 中使用一段时间后，我发现我尝试使用设备特定媒体查询定位的样式没有注册，因为我在 SCSS 中最后一次媒体查询不够具体.

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

Device-Specific @media queries don't seem to work

css

sass

media-queries

大家好