內聯樣式不受媒體查詢的影響

Question

我在媒體查詢方面遇到問題。

例如，我有一行包含內聯樣式

<h1>Hello<span style="font-size:80px;">WORLD</span>

@media (max-width: 768px) {
    h1 {
        font-size: 180% !important;    
    }    
}

“ Hello”根據媒體查詢而變化，但是跨度“ WORLD”仍然是相同的字體大小。

無論如何，我可以僅使用HTML和CSS來更改此設置嗎？

Answer 1

您必須這樣編寫選擇器：

h1 span{
    font-size: calc(80px *1.8) !important;/* or just 144 */
}

您不能只使用180％，因為它將在應用內聯樣式之前根據字體的大小來計算大小（除非您打算這樣做）。