簡單的方法來實現響應字體大小

是否有一種方法可以設置所有字體大小以縮小媒體查詢中的x值，而不是爲每個元素（h1，h2，h3）設置字體大小。目前，我有一個媒體查詢，看起來像這樣：簡單的方法來實現響應字體大小

@media only screen and (min-width : 1200px) { 
    body { 
    font-size: 20px; 
    } 
}

然而，這並沒有爲標題的大小。有沒有辦法在網站上包含所有文字？謝謝

來源

2017-10-07 RT5754

使用root EM'rem'您的標題。檢查[本文]（https://www.sitepoint.com/understanding-and-using-rem-units-in-css/）。 – skobaljic

是的，基本上你可以爲像html這樣的根元素設置像素的字體大小，然後你可以使用rem單位爲其他元素設置字體大小。在您的@media規則中，您必須更改html元素的font-size屬性，並且由於您使用的是rem s，因此它們將同樣影響其他元素，因爲它們取決於根的字體大小。

html { 
    font-size: 12px; 
} 

p { 
    font-size: 1.1rem; 
} 

.footer { 
    font-size: .9rem; 
} 

@media (max-width: 767px) { 
    /* now the basis for all the font sizes set in 
    rems is 10px. For example, font-size for p is 10*1.1 = 11px. 
    Previously it was 1.1*12 = 13.2px. */ 
    html { 
     font-size: 10px; 
    } 
}

來源

2017-10-07 19:23:45 curveball

偉大的這是我需要感謝 – RT5754

div{font-size:15px;} 
 
@media screen and (max-width:1200px) { 
 
    div{font-size:20px;} 
 
} 
 
@media screen and (max-width:600px) { 
 
    div{font-size:25px;} 
 
} 
 
@media screen and (max-width:320px) { 
 
    div{font-size:50px;} 
 
}

<div>test font size</div>

來源

2017-10-07 19:37:51

簡單的方法來實現響應字體大小

回答

相關問題