Question

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

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

Html（关于样式表;移动设备是＆＃34; handheld.css＆＃34;）：

<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 （默认）规则应该首先出现。它们定义默认样式。第二部分＆＃34;部分＆＃34;包含媒体查询。因此，您只需将最后两个类移动到样式表的开头即可。在您的情况下，它们会覆盖媒体查询定义的所有规则。

这是一个解决方案：

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

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

1 个答案: