CSS 移动媒体查询未应用

Question

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

实际发生的是它正在为 1303px 屏幕应用样式。

它划掉了实际适用于该屏幕尺寸 (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;
   }
 }

Answer 1

应用1303px的媒体是正常的，因为说是max-width，也就是说除了已经到了最后一个样式之外，所有小屏都会应用这个样式。所以它将覆盖所有以前的样式。

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

CSS 移动媒体查询未应用

CSS Media Query For Mobile Not Applying

css

media-queries

scss-mixins

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