Question

我正在使用WordPress网站并尝试将媒体查询样式应用于特定ID：

HTML：

<div class="parallax-window" data-parallax="scroll" data-image-src="/wp-content/themes/TheBullshitCollection/Images/white-background.jpg">
    <div class="welcome-page-div">
    <h3 id="welcome-cursive">Welcome</h3>
    </div>

    <div class="welcome-page-div">
    <h3>To the Bullshit Collection</h3>
    </div>

    <section id="section5" class="demo">
    <a href="#menu-main"><span></span>Scroll</a>
    </section>
</div>

CSS：

/* MEDIA QUERIES */

/* SMART PHONE */

@media screen and (max-width: 320px) {
    #welcome-cursive {
        font-size: 270px!important;
    }

    .welcome-page-div h3 {
        font-size: 270px;
    }
}

正如您所看到的，我正在努力使ID为welcome-cursive的h3在宽度为320px及以下时获得270px的字体大小。我已经看过这篇文章：CSS media query not applying

我的样式表在functions.php文件中排队，并包含在标题中：

<link rel="stylesheet" href="http://thebullshitcollection.com/wp-content/themes/TheBullshitCollection/css/bullshit.css">

然而，媒体查询未显示在检查员中。这是我的网站：http://thebullshitcollection.com/

它按照预期在JSFiddle中工作：
https://jsfiddle.net/6gmzps4o/

我还尝试将其添加到媒体查询中：

.welcome-page-div h3 {
    font-size: 270px;
}

但仍然没有结果:(

Answer 1

尝试在头部分元视口上添加：

<meta name="viewport" content="width=device-width, initial-scale=1">

CSS - 媒体查询在浏览器中不呈现

1 个答案: