在斷點處更改引導程序3全局字體大小

Question

我正在使用引導程序3並希望在每個斷點處更改整個站點的字體大小，以便我可以在一個位置更改字體大小並使其級聯到所有引導組件。

基字體大小，我想主要有：

@media (max-width: @screen-xs-max) { // Base font size is 12px } 
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { // Base font size is 13px } 
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { // Base font size is 14px } 
@media (min-width: @screen-lg-min) { // Base font size is 16px } 

不過，我看不出這樣做的方式。看來所有的字體大小值都是硬編碼的。對我來說，唯一的方法是在每個斷點處手動重新定義每個組件的字體大小？爲了澄清，我正在尋找一種方法來在每個斷點處指定不同的基本字體大小，以便所有組件都使用新的基本字體大小。

否則有什麼選擇？在每個斷點處，我必須手動更改每個標題的字體大小，p,cite？

Answer 1

它最好使用字體大小的標題爲24px;內容爲14px;使其完美適合所有設備，並具有可讀性的目的。如果你想減少每個中斷點的字體大小。那麼你必須利用媒體查詢。或以百分比形式給出字體。

Answer 2

嘗試使用媒體查詢更改基本字體大小，並使用「em」而不是「px」定義所有網站的字體大小。

請繼續這樣：

1）定義基於斷點全球字體大小（以下代碼寫入以下）

body { 
    @media (max-width: @screen-xs-min) { 
    font-size: 10px; 
    } 

    @media (min-width: @screen-xs-min) and (max-width: @screen-xs-max) { 
    font-size: 11px; 
    } 

    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { 
    font-size: 12px; 
    } 

    @media (min-width: @screen-md-min) { 
    font-size: 14px; 
    } 
} 

2）定義元素的字體大小基於他們父母的。例如：

body div { 
    font-size: 1em; // same size as parent 

    p { 
     font-size: 0.8em; // a little bit smaller 
    } 
}