如何设置媒体查询并使其在移动设备上工作

Question

我希望在浏览器调整大小以及在移动设备上更改我的字体大小。如果我尝试在 PC 上执行此代码，则此代码有效，但如果我在移动设备上打开我的网站，它不会调整我的文本大小。

我问的是为什么这段代码不工作，而不是怎么写。

Html（关于样式表；用于移动设备的是“handheld.css”）：

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css" media="only screen and (min-width: 1121px)">
<link rel="stylesheet" type="text/css" href="handheld.css" media="only screen and (max-width:1120px)">

handheld.css：

@media only screen and (max-width:320px) {
    #easy {
        font-size: 24px;
    }
    h2{
      font-size: 15px;
    }
}

@media only screen and (min-width:321px) {
    #easy {
        font-size: 25px;
    }
    h2{
      font-size: 16px;
    }
}


@media only screen and (min-width:380px) {
    #easy {
        font-size: 26px;
    }
    h2{
      font-size: 17px;
    }
}

@media only screen and (min-width:420px) {
    #easy {
        font-size: 27px;
    }
    h2{
      font-size: 18px;
    }
}

#easy{
  position: relative;
  left: 40%;
  font-family: "sweetness", Verdana;
    top: -63%;
    margin-left: 3px;
                                       fontsize: calc(15px + 3vw);\\this is an alternative to media queries
}

h2{ 
  position: relative;
  color:#fff;
   text-decoration: none;
   font-family: "sweetness", Verdana;
   text-shadow:
   -0.5px -0.5px 0 #000,  
    0.5px -0.5px 0 #000,
    -0.5px 0.5px 0 #000,
     0.5px 0.5px 0 #000;
     top: 40px;
                                         fontsize: calc(15px + 2vw); \\this is an alternative to media queries

}

Answer 1

CSS 规则顺序是 master （默认）规则应该放在第一位。他们定义了默认样式。第二个“部分”包含媒体查询。因此，您只需将最后两个类移动到样式表的开头。在您的情况下，它们会覆盖媒体查询定义的所有规则。

这是一个解决方案：

#easy{
  position: relative;
  left: 40%;
  font-family: "sweetness", Verdana;
    top: -63%;
    margin-left: 3px;
                                       fontsize: calc(15px + 3vw);\\this is an alternative to media queries
}

h2{ 
  position: relative;
  color:#fff;
   text-decoration: none;
   font-family: "sweetness", Verdana;
   text-shadow:
   -0.5px -0.5px 0 #000,  
    0.5px -0.5px 0 #000,
    -0.5px 0.5px 0 #000,
     0.5px 0.5px 0 #000;
     top: 40px;
                                         fontsize: calc(15px + 2vw); \\this is an alternative to media queries

}
@media only screen and (max-width:320px) {
    #easy {
        font-size: 24px;
    }
    h2{
      font-size: 15px;
    }
}

@media only screen and (max-width:379px) {
    #easy {
        font-size: 25px;
    }
    h2{
      font-size: 16px;
    }
}


@media only screen and (max-width:419px) {
    #easy {
        font-size: 26px;
    }
    h2{
      font-size: 17px;
    }
}

@media only screen and (min-width:420px) {
    #easy {
        font-size: 27px;
    }
    h2{
      font-size: 18px;
    }
}