CSS - 媒体查询在浏览器中

问题描述：

我工作的一个WordPress站点未呈现，并试图媒体查询样式应用到特定的ID：CSS - 媒体查询在浏览器中

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

但没有结果：（

它适用于我，只要确保您清除了浏览器缓存（ctrl + f5）即可。 –

有没有办法用mac做到这一点？（谷歌浏览器） – HappyHands31

@ HappyHands31尝试'font-size：270px！important;'？在你的代码中你错过了一个270px和！之间的空格 –

答

请尝试添加头部部分元视口：

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

CSS - 媒体查询在浏览器中

相关推荐