Question

我们正在为学校项目开发一个网站：该网站也必须在移动设备（和平板电脑）上提供我们已达到此目标，但 font-size 的问题除外：我们已通过@media query手动设置此属性。

是否存在一种方法，可以在不使用百分比的情况下使字体大小变为动态？

由于

Answer 1

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

.yourClass {
    font-size: 2.0vw;
}

它表示视口宽度的2.0％。您还可以使用2.0vh（2.0％视口高度）

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

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/

Css - 动态字体大小

3 个答案: