CSS代码中的媒体查询有问题吗？答案

【问题标题】：is there a problem with the media query in the CSS code?CSS代码中的媒体查询有问题吗？
【发布时间】：2021-09-24 00:01:21
【问题描述】：

大家好，我第一次尝试使用媒体查询来制作一个简单的响应式部分，当屏幕较小时字体大小会变小

但是由于某种原因它对我不起作用，如果你看到我不知道的东西

这是我用于项目的 HTML 代码

HTML：

<!DOCTYPE html>
<html>
<head>
    <title>
EYD
    </title>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" >
</head>


<body>
   
<main>
    <div class="mainco">
        <h1>
            welcome to <br><span>EYD</span>
        </h1>
        <h2>best web-developing service on the internet</h2>
        <div class="buttons">
            <p><a href="#">ORDER</a></p> 
            <p><a href="#">HOW IT WORKS</a></p>
        </div>    
    </div>
</main>
<!-- ******************************************************** -->

<section>

</section>

</body>
</html>

这是包含针对页面中 h1 元素的媒体查询的 CSS 代码

CSS：

/*this is a universal selector to clear the padding and margin*/
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{
    font-family:Verdana, Geneva, Tahoma, sans-serif;
}

/*-------------------------------------
main 
--------------------------------------*/


/*here is the style of the main as a section*/
main{
    background: url(code1.jpg) purple;
    background-repeat: no-repeat;
    background-size:cover ;
    width: 100%;
    height: 630px;
    color: white;
    font-family: "alternate gothic";
    padding: 20px 0 0 0;
    
}

/*the style of the main section's text block*/
.mainco{
    width: 40%;
    max-height: 70%;
    text-align: center;
    margin: 10% 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

@media only screen and (max-width: 800px){
    .mainco h1{
        font-size:20px;
    }
}


/*the style of the h1 of the text*/
.mainco  h1 {
    font-size: 60px;
}
.mainco h1 span{
    text-shadow: 3px 3px rgb(167, 119, 119); font-size: 75px;
}
/*the style of h2 of the text*/
main  h2{
    font-size: 50px;
}
.buttons{
    min-width: 400px;
}
/*the style of the two button's text containers*/
.buttons p{
    padding: 20px;
    background-color: brown;
    display: inline-block;
    margin: 60px 20px;
}
/*styling the button's text*/
.buttons a{
    text-decoration: none;
    color: white;
    display: block;
    width: 100%;
    height: 100%;
}

【问题讨论】：

您的媒体查询被 h1 规则覆盖，因为您在查询后声明了字体大小 h1。
您可以尝试在@media的属性末尾添加!important

标签： html css media

【解决方案1】：

始终将媒体查询放在 CSS 代码的末尾。这将阻止其他 h1 声明覆盖您的媒体查询。

【讨论】：

【解决方案2】：

CSS 代码的主要问题是顺序

您的声明 .mainco h1 会覆盖之前声明的媒体查询，因此如果您将 CSS 更改为此，它将起作用。

您的媒体查询应低于您的全局 CSS

/*here is the style of the main as a section*/
main{
    background: url(code1.jpg) purple;
    background-repeat: no-repeat;
    background-size:cover ;
    width: 100%;
    height: 630px;
    color: white;
    font-family: "alternate gothic";
    padding: 20px 0 0 0;
    
}

/*the style of the main section's text block*/
.mainco{
    width: 40%;
    max-height: 70%;
    text-align: center;
    margin: 10% 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

@media only screen and (max-width: 800px){
    .mainco h1{
        font-size:20px;
    }
}


/*the style of the h1 of the text*/
.mainco  h1 {
    font-size: 60px;
}
.mainco h1 span{
    text-shadow: 3px 3px rgb(167, 119, 119); font-size: 75px;
}
/*the style of h2 of the text*/
main  h2{
    font-size: 50px;
}
.buttons{
    min-width: 400px;
}
/*the style of the two button's text containers*/
.buttons p{
    padding: 20px;
    background-color: brown;
    display: inline-block;
    margin: 60px 20px;
}
/*styling the button's text*/
.buttons a{
    text-decoration: none;
    color: white;
    display: block;
    width: 100%;
    height: 100%;
}

【讨论】：