响应字体大小/重量

我可以通过使用百分比来使图像/ 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

响应字体大小/重量

回答

相关问题