我一直在想一种方法来随着父元素大小的变化而改变字体大小。这很可能是由于浏览器大小发生了变化。例如，当我将 Chrome 缩小时，字体会变小，反之亦然。
我在考虑媒体查询，但它也不适合我真正想要的。媒体查询非常适合检测正在使用的设备以及所有设备，但不是我想要的。我在想答案在于某种 JavaScript，但如果有一个使用 CSS 的答案，我会更喜欢。我做了一些研究，但找不到我想要的东西。
问问题
1483 次
5 回答
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;}}
选择的大小可能不是最好的，过渡是为了避免在调整窗口大小时跳跃大小。
玩得开心 ！
于 2013-06-06T02:56:06.453 回答
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%;
}
它们在每个视口上都很灵活。希望这对您有所帮助。
于 2013-06-06T19:58:02.963 回答
2
fit text 插件对于大字体来说真的很有趣。如果您正在考虑文本和段落字体，那么它可能不是最好的解决方案。
媒体查询解决方案是最常见的方法，尽管还有一种称为响应式排版的技术，其中字体大小不是按预定步骤变化，而是随着窗口的变化而逐渐变化。
本质上，您将字体大小设置为其父元素的百分比，例如正文宽度的百分比。我对该技术的最佳描述是http://www.netmagazine.com/tutorials/build-responsive-site-week-typography-and-grids-part-2
祝你好运！
于 2013-06-07T23:40:08.407 回答
1
http://fittextjs.com/ 这是一个很好的插件，它可以做到这一点
于 2013-06-06T02:38:50.267 回答
1
您可以为响应式字体使用 CSS3 vh、vw和新值。vminvmax
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-22T07:26:42.447 回答