排隊時，屏幕內function.php WordPress的

-2

我現在有這我加載在我的主題function.php兩個CSS文件大小不同的CSS。這些CSS文件是'main.css'&'mobile.css'。 'mobile.css'在屏幕尺寸最小或等於'max-width：500px'時加載。問題是，如果我調整大於500px到< 500px的窗口，它不會加載並覆蓋'main.css'。排隊時，屏幕內function.php WordPress的

下面是我入隊中的文件：

wp_enqueue_style('mainstyle', get_template_directory_uri() . '/css/main.css', array(), '1.0.0', 'all'); 

wp_enqueue_style('mobilestyle', get_template_directory_uri() . '/css/mobile.css', array(), '1.0.0', 'screen and (max-width: 500px)');

反正是有與「mobile.css」的function.php文件，或實現這一點任何其他適當的方式中的文件，並覆蓋「的main.css」中加載任務仍然有兩個文件分開。

編輯：它檢測時窗口已經小於500像素，但不一樣，如果我手動調整較大的窗口。

我需要它，當我調整一個更大的窗口加載CSS。

來源

2017-06-01 The Little Cousin

您是否已驗證您的'mobile.css'確實正在加載？如果在'main.css'的'mobile.css'中使用相同的選擇器，則'mobile.css'中的樣式將覆蓋'main.css'中的樣式。如果'mobile.css'中的選擇符比'main.css'中的選擇符低，那麼它們**將不會被應用**，除非它是最初沒有在'main.css'中定義的屬性。您可以使用瀏覽器的開發工具來驗證所有這些。 – hungerstar

你必須顯示你的css文件，如果可能的話，還有一些DOM檢查，只是看到php的加載並不容易。 – calexandre

@hungerstar移動。如果我調整窗口的大小，CSS不會被加載。它只在窗口已經小於500px時加載 –

你的樣式表沒有被應用，因爲視口的尺寸被加載頁面時的原因。根據MDN：

當媒體查詢是真實的，相應的樣式表或風格規則被應用於，按照正常級聯規則。樣式表與連接到他們的標籤仍然會下載即使他們的媒體查詢將返回false媒體查詢（它們將不適用於對）。

這意味着如果該視口是上述當頁面被加載500px和true當500px或更少的規則max-width: 500px將評估爲false。如上所述，如果評估爲false，樣式表將被下載，但樣式不會被應用。現在

，我從來沒有使用媒體查詢在media標籤前，因爲上述的結果，似乎有點限制。我可以建議的最好方式是將自己的桌面樣式包含在文件本身的媒體查詢中，並將其單獨包含在head中，以便評估始終爲真，並在調整瀏覽器大小時應用。

<link href="/css/mobile.css" type="text/css" rel="stylesheet"> 
<link href="/css/main.css" type="text/css" rel="stylesheet">

的CSS文件的示例：

// mobile.css 
p { 
    color: seagreen; 
} 

// main.css 
@media screen and (min-width: 501px) { 

    p { 
    color: rebeccapurple; 
    } 

}

以上是移動第一種方法的例子，你不「包含」移動樣式媒體的質疑，而是平板電腦，臺式機等。樣式是。

這是CodePen demonstrating上面的方法。

來源

2017-06-01 18:19:36 hungerstar

您是否可以編輯並添加，同時加載兩個文件，然後在移動設備中添加媒體查詢。 CSS –

如何在樣式表中設置規則？

您可以創建在樣式表規則，當滿足一定的條件激活？您可以檢查此

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

喜歡的東西：

@media only screen 
and (min-width: 450px) 
and (max-width: 768px) { 

    //change whatever element you want  

}

來源

2017-06-01 17:10:52

排隊時，屏幕內function.php WordPress的

回答

相關問題