響應字體大小/重量

我可以通過使用百分比來使圖像/ div響應。響應字體大小/重量

如何使字體大小響應不同的屏幕尺寸？

2012-07-12 gaurav jain

您可能感興趣的[this] [1] 。 [1]：[？如何基於窗口寬度增加字體大小] http://stackoverflow.com/questions/1181689/font-size-relative-to-page-size的 – Tom 2012-07-12 20:36:18

可能重複（ http://stackoverflow.com/questions/3146395/how-to-increase-font-size-based-on-window-width） – sachleen 2012-07-12 20:36:34

我會問「我該嗎？」。瀏覽器調整大小通常是爲了查看更多內容 - 而不是更大的內容。我們有瀏覽器縮放來處理後者。 – 2012-07-12 20:38:00

最近我偶然發現了這個問題，我爲它寫了一個適合我需求的解決方案。也許你會發現你也可以將它整合到你的CSS中。

github.com/wadim/responsive-font-size

用法：

@import "responsive-font-size"; 

p { 
    @include responsive-font-size (
     $min-font-size: 1.8em, 
     $max-font-size: 3.7em, 
     $min-screen-width: 640px, 
     $max-screen-width: 1200px, 
     $font-size-step: 0.3em /* optional parameter, default: 0.1em */ 
    ); 
}

它基本上是說：

對於屏幕寬度小於640像素，小我想要的字體大小爲1.8em
的屏幕寬度大於1200px我希望它是3.7em
scale th在
之間適當Ë字體不打擾不到0.3em

來源

2013-02-23 11:51:50 wadim

這看起來很不錯！謝謝！ – 2013-04-09 20:38:18

如果您希望在點擊寬度里程碑時（例如768px，370px等）更改它，請使用CSS3媒體查詢。如果您希望它不斷變化，那麼您可以使用與圖像/ div（即target/context = result）相同的百分比或em技術，但我會建議媒體查詢。

來源

2012-07-19 22:36:18 wjfamilia

根據您要支持的瀏覽器的陣列上更改字體大小，CSS3視口百分比長度可能是一個很好的解決方案：

http://css-tricks.com/viewport-sized-typography/

http://dev.w3.org/csswg/css-values/#viewport-relative-lengths

我決定反對這種做法，因爲它僅支持iOS6的，而不是Android和我的項目是平板&智能手機的移動網站。

來源

2013-04-09 20:40:24

您可以使用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; 
}

來源

2015-12-22 07:15:19 sameeuor

響應字體大小/重量

回答

相關問題