移动设备的 CSS 媒体查询不适用答案

【问题标题】：CSS Media Query For Mobile Not Applying移动设备的 CSS 媒体查询不适用
【发布时间】：2022-01-16 06:19:37
【问题描述】：

目标：看到 h1 字体大小在达到 375px 屏幕大小时调整大小。

实际发生的是它正在为 1303 像素大小的屏幕应用样式。

它删除了实际适用于该屏幕尺寸 (375px) 的媒体查询...

我尝试过的：

检查我在 html 中有这个 <meta name="viewport" content="width=device-width, initial-scale=1.0">

尝试最小宽度并尝试更改值

     h1 {
   padding-bottom: 61px;
   font-family: $h1;
   font-weight: 700;
   font-size: 55px;
   letter-spacing: -0.45px;
   line-height: 50px;
   color: $primary-color-grey;
   width: 428px;
   position: absolute;
   left: 0px;

   @media screen and (max-width: 375px) {
     font-size: 20px;
     width: 660px;
     line-height: 65px;
   }

   @media screen and (max-width: 816px) {
     font-size: 55px;
     width: 660px;
     line-height: 65px;
   }

   @media screen and (max-width: 1303px) {
     font-size: 60px;
     width: 660px;
     line-height: 65px;
   }
 }

【问题讨论】：

您必须更改媒体查询声明的顺序。从最宽的屏幕分辨率开始到最小。 @media screen and (max-width: 1303px) 然后@media screen and (max-width: 816px) 等等
我在阅读您的评论之前就想到了这一点，非常感谢，它成功了。

标签： css media-queries scss-mixins

【解决方案1】：

应用 1303px 媒体是正常的，因为告诉它是最大宽度，这意味着所有的小屏幕都会应用该样式，除了它已经到了最后一个样式。所以它将覆盖所有以前的样式。

“szulbix”解决方案非常适合您的情况。

【讨论】：