CSS - 动态字体大小

Question

我们正在开发一个学校项目的网站，这个网站必须可以在移动设备（和平板电脑）上使用。我们已经实现了这个目标，但是存在一个问题：字体大小使用@media查询手动设置属性。是否有一种方法可以使字体大小具有动态性而不使用百分比？谢谢。

- user3751470

---

总有紧急情况 :) - mingos

我想他在谈论视口渲染。 - Azincourt

我认为最好使用@media，因为它对跨浏览器支持更好。 - docodemore

Answer 1

如果我理解您的问题，您应该考虑这个选项：

.yourClass {
    font-size: 2.0vw;
}

这意味着它占 视窗 宽度的2.0％。您也可以使用2.0vh（2.0％视窗高度）。

- Azincourt

Answer 2

我不确定其他人对这个解决方案的感觉（因为有些人会认为它是不必要的脚本），但对我来说效果非常好。我使用jQuery将字体大小设置为屏幕大小的百分比。

var FONT_SCALE = 0.027;

function initFontSizes() {
    $(".text-element").css("font-size", $(window).height() * FONT_SCALE);
}

如果你想的话，你可以将它添加为一个jQuery函数，这样你就可以在任何对象上调用它：

jQuery.fn.setFontSize(scale) {
    $(this).css("font-size", $(window).height() * scale);
}

- cohenadair

Answer 3

如果你想用一些 JavaScript 来搞混局面，你可以尝试以下代码：

$(function(){
    resizeFont();    
    $(window).resize(function(){
        resizeFont();    
    });
    function resizeFont(){
        var windowWidth = $(window).width(),
            psize = windowWidth/ 10;
        $("p").css("font-size",psize);
    }
});

不过，你需要一些数学知识才能正确地解决它。

http://jsfiddle.net/wildandjam/5Hnxa/

- wildandjam