HTML-CSS代码中的媒体查询有问题吗？-堆栈溢出

顺晟科技

2022-10-19 12:42:36

100

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

但出于某种原因，它对我不起作用，如果你从我身上看到了我不存在的东西，请告诉我

以下是我用于该项目的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>

以下是CSS代码，其中包含针对页面中h1元素的媒体查询

CSS:

<!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>

顺晟科技：

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

CSS代码的主要问题是顺序

您的声明。MainCo h1覆盖以前声明的媒体查询，因此如果将CSS更改为此，它将工作。

您的媒体查询应该在全局CSS中

<!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>

上一篇：PHP-如何在网页上安全地输出用户提下一篇：JavaScript-为什么给出参数

网站建设

Html

HTML-CSS代码中的媒体查询有问题吗？-堆栈溢出