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

但沒有結果：（

來源

2017-05-07 HappyHands31

它適用於我，只要確保您清除了瀏覽器緩存（ctrl + f5）即可。 –

有沒有辦法用mac做到這一點？（谷歌瀏覽器） – HappyHands31

@ HappyHands31嘗試'font-size：270px！important;'？在你的代碼中你錯過了一個270px和！之間的空格 –

請嘗試添加頭部部分元視口：

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

來源

2017-05-12 08:09:48

CSS - 媒體查詢在瀏覽器中

回答

相關問題