响应式字体大小答案

【问题标题】：Responsive Font Sizing响应式字体大小
【发布时间】：2013-06-01 21:56:50
【问题描述】：

我一直在想办法在父元素大小改变时改变字体大小。这很可能是由于浏览器大小发生了变化。例如，当我将 Chrome 缩小时，字体会变小，反之亦然。

我在考虑媒体查询，但它也不适合我真正想要的。媒体查询非常适合检测正在使用的设备以及所有设备，但不是我想要的。我在想答案在于某种 JavaScript，但如果有一个使用 CSS 的答案，我会更喜欢。我做了一些研究，但找不到我想要的。

【问题讨论】：

标签： javascript html css responsive-design

【解决方案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;
}

【讨论】：

【解决方案2】：

适合大字体的文本插件非常有趣。如果您正在考虑文本和段落字体，那么它可能不是最好的解决方案。

媒体查询解决方案是最常见的方法，但还有一种称为响应式排版的技术，其中字体大小不是按预定步骤变化，而是随着窗口的变化而逐渐变化。

基本上，您将字体大小设置为其父元素的百分比，例如正文宽度的百分比。我所知道的对该技术的最佳描述是http://www.netmagazine.com/tutorials/build-responsive-site-week-typography-and-grids-part-2

祝你好运！

【讨论】：

【解决方案3】：

所有插件都是垃圾。只需尝试使用简单的 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%;
}

它们在每个视口上都将是灵活的。希望对您有所帮助。

【讨论】：

我试过了。我尝试调整浏览器大小的某些原因是字体大小没有改变。我想是因为 max-width 正在检测它具有的可用宽度，而不是浏览器宽度的“现在”大小。

【解决方案4】：

您可以使用媒体查询。我用它来测试：

@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;}}

选择的大小可能不是最好的，过渡是为了避免在调整窗口大小时跳到大小。

玩得开心！

【讨论】：

【解决方案5】：

http://fittextjs.com/ 这是一个很好的插件，可以做到这一点

【讨论】：