一些CSS查詢不工作

我目前在做這個： https://codepen.io/juanor/pen/gxELZN 一些CSS查詢不工作

我無法讓我查詢了兩個特定部件工作正常字體。他們對整個項目工作良好，但對於這兩個：p.maininfo和.ejkanji，.ejkana，.ejes。

這是我的查詢：

@media screen and (max-width: 800px) { 
html { 
    font-size: 20px; 
}

我使用所有的元素REM單位，他們似乎工作只是與查詢的罰款。有人能告訴我爲什麼這兩個人是唯一不工作的人嗎？

預先感謝您！

來源

2017-09-10 Juan Camilo Orjuela

你能解釋其中的具體元素不行爲，你所期望的字體大小是和它實際上是什麼？ – Charlie

帶有p.maininfo和.ejkanji，.ejkana，.ejes，第一個白色框中的文本和最後一個文本的元素。在較小的尺寸中，字體應該變得更大以提高易讀性，但是那些字體保持相同。這就像查詢不會影響他們。 –

-1

你不應該使用html作爲選擇器來改變類型。你可以使用body。我建議修改你的一些類並使用web開發工具來確保它們不被其他人覆蓋。

我看着你的代碼，並注意到你的查詢可以改進。尋找最常用的媒體查詢。

來源

2017-09-10 02:53:51 clementeghuerta

-1

而不是使用html作爲選擇使用*的，類似如下...

下面的代碼是工作...

*{font-size: 60px;} 
 
@media screen and (max-width: 400px) { 
 
* { 
 
    font-size: 20px; 
 
}

<h1>Hwllo World</h1>

來源

2017-09-10 03:00:29

我已經完成了它，但它還沒有工作......這就好像查詢不影響這些類。 –

@JuanCamiloOrjuela Plese現在檢查工作示例...我已經編輯了我的答案 –

@Drugan你可以在css中使用任何選擇器，這裏的問題是由於特殊性的概念。 –

它不會工作！因爲它會被已寫入的CSS樣式覆蓋。這個概念被稱爲特異性。請看this link。你已經寫了像body，h1-h6，li，p等元素的樣式，所以你需要重寫相同的元素。 E.g，

body{ 
    font-size: 18px; 
} 
h1{ 
    font-size : 30px; 
} 

@media screen and (max-width: 400px) { 
body { 
    font-size: 10px; 
    } 
h1{ 
    font-size : 20px; 
} 
}

來源

2017-09-12 05:50:31

這些樣式中的大部分都是用rem編寫的，所以在更改時會影響它們的主體字體大小。但是，我在瀏覽器開發工具中看到的是查詢沒有被應用。這些類的字體大小由正常的主體字體大小決定，而不是查詢主體的字體大小。 –

一些CSS查詢不工作

回答

相關問題