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

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规则顺序是主（默认）规则应该优先。他们定义了默认样式。第二个“部分”包含媒体查询。因此，你只需要最后两个类移动到开始的样式表。在你的情况下，他们会覆盖媒体查询定义的所有规则。

这里是一个解决方案：

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