为什么媒体查询不适用于最大宽度425像素？

Question

我想对最大宽度768px和最大宽度425px应用媒体查询，但是当我的宽度为425px时，就会应用最大宽度768px的媒体查询样式（因此，设备的宽度为425px，al- article-tags-chip-list-container为600px），为什么？对于宽度768像素，媒体查询也在申请最大宽度768像素（符合预期）。

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

Answer 1

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

我复制了您的有效代码。

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

Answer 2

我之前对这个问题的解决方案是，您需要创建另一个css文件，然后将@media query代码放置在其中，其值为425px宽度。

例如：

Style3.css    /* Your file name created */

然后输入以下代码：

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

[请让我知道这是否适合您。谢谢

为什么媒体查询不适用于最大宽度425像素？

问题描述投票：0回答：2

2个回答

最新问题

为什么媒体查询不适用于最大宽度425像素？

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2