響應字體大小使用css /引導

我已經創建了一個頁面。這應該能夠跨桌面，移動和平板電腦進行響應。響應字體大小使用css /引導

無論何時調整頁面大小以外的字體看起來都很順暢。但字體大小在手機中保持不變。它佔據主要空間而不是用戶友好。

如何使它響應？

我的示例CSS：

body { 
    font-size : 36px; 
}

這裏我使用px我聽到vw會給響應，但我不知道它是如何工作的。這是這個最好的字體屬性？

或者是否有任何引導樣式可用於此？

來源

2017-05-30 Mohideen ibn Mohammed

使用'CSS媒體queries'合作，在不同的屏幕'突破points'定義不同'字體size'爲'body'。閱讀更多[這裏]（https://www.w3schools.com/css/css_rwd_mediaqueries.asp） –

我知道媒體查詢，但有更好的解決方案，以響應....我試過大小屬性'vw'它的工作，但不正是.....我的意思字體大小應根據屏幕大小進行縮放。例如：如果它的網站，總寬度：100％意味着字體大小應該爲40％，就像在移動設備明智的應該..我需要更多的澄清'vw' –

使用一個不同的計算單位：

body { 
    font-size : 2em; 
}

來源

2017-05-30 08:12:07 Gerard

或者在每個視口上設置一個新的字體大小。 – MFGSparka

會根據屏幕分辨率自動縮放嗎？字體大小應該是在特定的比例甚至調整大小 –

嘗試使用媒體查詢

@media screen and (max-width: 420px){ 
    body { 
    font-size : 25px; 
    } 
} 

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

來源

2017-05-30 08:16:23 PenAndPapers

我知道媒體查詢，但有更好的解決方案，以響應....我試過大小屬性vw它的作品，但不完全.....我的意思字體大小應根據屏幕尺寸。例如：如果它的網站，總寬度：100％意味着字體大小應該爲40％，就像在移動設備明智應該..我需要更多的澄清vw - –

h1 { 
    font-size: 5.9vw; 
} 
h2 { 
    font-size: 3.0vh; 
} 
p { 
    font-size: 2vmin; 
}

1vw = 1視口寬度

1vh = 1％的％視口高度

1vmin = 1vw或1vh，取其較小者

1vmax = 1vw或1vh，以較大者爲準

來源

2017-05-30 08:19:15

我沒有用過這個還沒有，但你應該能夠使用百分比，給你的身體你的「基礎字體大小」，並從那裏使用百分比。

html, body { 
    font-size: 14px; 
} 

.some-element { 
    font-size: 120%; 
}

另一種辦法是用REM

來源

2017-05-30 08:29:04 AlexG

響應字體大小使用css /引導

回答

相關問題