时间戳

首页 > 解决方案 > 为什么媒体查询不申请 max-width 425px？

css - 为什么媒体查询不申请 max-width 425px？

问题描述

我想为max-width 768pxand应用媒体查询max-width 425px，但是当我的宽度为 425px 时，max-width 768px正在应用媒体查询的样式（因此，设备宽度为 425px，宽度al-articles-tags-chip-list-container为 600px），为什么？

而对于width 768px，媒体查询也正在申请max-width 768px（如预期的那样）。

.al-articles-tags-chip-list {
  width: 100%;
}

.al-text-before-search {
  font-size: 36px;
  margin-right: 22px;
}

.al-search-input-container {
  flex: 2;
}

.al-articles-tags-chip-list-container {
  margin: 0 auto;
  padding-top: 150px;
  width: 1000px;
  display: flex;
}


@media only screen and (max-width: 1024px) {
  .al-articles-tags-chip-list-container {
    width: 700px;
  }
}

@media only screen and (max-width: 768px) {
  .al-articles-tags-chip-list-container {
    width: 600px;
  }

  .al-text-before-search {
    font-size: 26px;
  }
}

@media only screen and (max-width: 425px) {
  .al-articles-tags-chip-list-container {
    display: block;
    width: 300px;
    padding-top: 115px;
  }

  .al-text-before-search {
    font-size: 26px;
  }

  .al-search-input-container {
    flex: unset;
  }
}
<div class="al-articles-tags-chip-list-container">
  <div class="al-text-before-search">
    <span>I WOULD LIKE TO SEE</span>
  </div>
  <div class="al-search-input-container">
    <mat-form-field class="al-articles-tags-chip-list">
      ....
    </mat-form-field>
  </div>
</div>

标签： cssangularlessmedia-queries

解决方案

您需要将 meta 添加viewport到 head 标签。

我重现了你的代码它工作。

更新：我还尝试以角度重现您的代码，它有效，您需要检查您的 style.css 中是否有任何冲突@media

https://stackblitz.com/edit/angular-check-mediaquery

在此处输入图像描述

在此处输入图像描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .al-articles-tags-chip-list {
  width: 100%;
}

.al-text-before-search {
  font-size: 36px;
  margin-right: 22px;
}

.al-search-input-container {
  flex: 2;
}

.al-articles-tags-chip-list-container {
  margin: 0 auto;
  padding-top: 150px;
  width: 1000px;
  display: flex;
}


@media only screen and (max-width: 1024px) {
  .al-articles-tags-chip-list-container {
    width: 700px;
  }
}

@media only screen and (max-width: 768px) {
  .al-articles-tags-chip-list-container {
    width: 600px;
  }

  .al-text-before-search {
    font-size: 26px;
  }
}

@media only screen and (max-width: 425px) {
  .al-articles-tags-chip-list-container {
    display: block;
    width: 300px;
    padding-top: 115px;
  }

  .al-text-before-search {
    font-size: 26px;
  }

  .al-search-input-container {
    flex: unset;
  }
}
    </style>
</head>
<body>
    <div class="al-articles-tags-chip-list-container">
        <div class="al-text-before-search">
          <span>I WOULD LIKE TO SEE</span>
        </div>
        <div class="al-search-input-container">
          <mat-form-field class="al-articles-tags-chip-list">
            ....
          </mat-form-field>
        </div>
      </div>
</body>
</html>

推荐阅读