响应字体大小

Question

我一直试图想办法在父元素大小改变时改变字体大小。最有可能的原因是浏览器大小的变化。例如，当我将Chrome缩小时，字体会变小，反之亦然。

我在考虑媒体查询，但它也不符合我的想法。媒体查询非常适合检测所使用的设备和所有设备，但不是我想要的设备。我认为答案在于某种JavaScript，但如果有一个使用CSS的答案，我宁愿这样做。我做了一些研究，但找不到我想要的东西。

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

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

玩得开心！

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

他们将在每个视口上保持灵活性。希望这会对你有所帮助。

Answer 3

fit文本插件对于大字体非常有趣。如果你正在考虑文本和段落字体，它可能不是最好的解决方案。

媒体查询解决方案是最常用的方法，尽管还有一种称为响应式排版的技术，其中字体大小不是以预定步骤改变，而是随着wiewport改变而逐渐改变。

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

祝你好运！

Answer 4

http://fittextjs.com/这是一个很好的插件，可以完成

Answer 5

您可以将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/