響應字體大小調整

Question

我一直在想辦法改變字體大小，因爲父元素大小發生了變化。這很可能是由於瀏覽器大小發生變化所致。例如，當我使Chrome變小時，字體會變得更小，反之亦然。

我在想媒體查詢，但它也不適合我確切想要的。媒體查詢非常適合檢測使用什麼設備和所有設備，但不是我想如何使用它。我認爲答案在於某種JavaScript，但如果有一個使用CSS的答案，我寧願這樣做。我已經做了一些研究，但找不到我想要的。

Answer 1

您可以使用CSS3 vh,vw,vmin和vmax響應字體的新值。視口寬度的

1vw = 1％

1vh = 1視口高度

1vmin = 1vw或1vh，取其％以下

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

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

更多det艾爾：https://css-tricks.com/viewport-sized-typography/

Answer 2

http://fittextjs.com/這裏是一個很好的插件，不正是

Answer 3

您可以使用mediaqueries。 我用這個爲我的測試：

@media all and (max-width:2700px) {html {font-size:50px;transition:1s;}} 
@media all and (max-width:2000px) {html {font-size:45px;transition:1s;}} 
@media all and (max-width:1600px) {html {font-size:30px;transition:1s;}} 
@media all and (max-width:1200px) {html {font-size:25px;transition:1s;}} 
@media all and (max-width:1100px) {html {font-size:22px;transition:1s;}} 
@media all and (max-width: 900px) {html {font-size:18px;transition:1s;}} 
@media all and (max-width: 700px) {html {font-size:15px;transition:1s;}} 
@media all and (max-width: 500px) {html {font-size:12px;transition:1s;}} 
@media all and (max-width: 300px) {html {font-size: 8px;transition:1s;}} 

選擇大小可能不是最好的，過渡是避免跳躍大小尺寸，同時調整窗口。

玩得開心！

Answer 4

所有的插件都是廢話。只要嘗試使用簡單的CSS。

例子：

@media screen and (min-width: 1200px){ 
font-size:80%; 
} 

@media screen and (max-width: 768px){ 
font-size:90%; 
} 

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

他們將在每一個視靈活。希望這可以幫助你。

Answer 5

適合文本插件對大字體非常有趣。如果你正在考慮文本和段落字體，它可能不是最好的解決方案。

媒體查詢溶液是最常用的方法，雖然也有一個稱爲響應排版技術，其中，所述字體大小在預定步驟不改變，但逐步作爲wiewport變化。

基本上你大小的字體作爲它們的父元素的一個百分比，例如身體寬度的百分比。我知道這個技術的最好描述是http://www.netmagazine.com/tutorials/build-responsive-site-week-typography-and-grids-part-2

祝你好運！