响应式字体大小

Question

我一直在想如何在父元素大小改变时改变字体大小。最有可能是由于浏览器大小的改变造成的。例如当我把Chrome缩小时，字体也会变小，反之亦然。

我考虑使用媒体查询，但它并不完全适合我的需求。媒体查询可以很好地检测使用的设备等，但不符合我的要求。我想答案在某种JavaScript中，但如果有一个使用CSS的答案，我更喜欢那个。我做了一些研究，但没有找到我想要的内容。

- Matthew

Answer 1

您可以使用媒体查询。我在我的测试中使用了这个：

您可以使用媒体查询。我在我的测试中使用了这个：

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

选择的尺寸可能不是最好的，这种转换是为了避免在调整窗口大小时跳跃到不同的尺寸。

祝你愉快！

- G-Cyrillus

Answer 2

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

他们将适应每个视口。希望这能帮到你。

- Akshaya Raghuvanshi

---

我已经尝试过了。但是当我尝试调整浏览器大小时，字体大小并没有改变。我想这是因为max-width检测到的是可用宽度而不是当前浏览器宽度的原因。 - Matthew

Answer 3

适应文本插件对于大字体非常有趣。但如果想到文字和段落字体，可能不是最好的解决方案。媒体查询解决方案是最常见的方法，但也有一种被称为响应式排版的技术，其中字体大小随着视口变化而不是预定步骤而逐渐改变。基本上，您将字体大小设置为其父元素的百分比，例如，正文宽度的百分比。我知道的最好的该技术描述在此链接中：http://www.netmagazine.com/tutorials/build-responsive-site-week-typography-and-grids-part-2 祝您好运！

- David Taiaroa

Answer 4

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

更多细节：https://css-tricks.com/viewport-sized-typography/

- sameeuor

Answer 5

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

- Steven