什么是处理网站字体大小调整的好方法

我会把所有单位 em 然后,使用一个简单的javascript一次扩展所有内容很简单,如下所示:

    $(function () {
        var fontSize = 1.1;
        $("#larger").click( 
            function () { 
                console.log("click");
                fontSize += .1;
                $("body").css("font-size", fontSize + "em"); 
            } 
        );

        $("#smaller").click( 
            function () { 
                console.log("click");
                fontSize -= .1;
                $("body").css("font-size", fontSize + "em"); 
            } 
        );
    });

如果在CSS中使用百分比作为字体大小,只需在BODY元素上设置一次字体大小,然后动态更改该值。其他一切都将成为其中的一部分。

你可以用几种方法。

我更希望在每次上下单击时切换样式表。您可以使用jQuery或普通的ole'JavaScript来实现这一点。

在这种情况下,无论您使用em还是px都没有区别,只要每个样式表中的大小值增加或减少。

或者,可以使用JavaScript简单地改变特定元素中文本的大小。再说一次,单位并不重要。你只是在改变这个值(比如12px到14px,或者1em到1.5em)

CSS应该可以正常工作。使用em,因为客户端仍然可以根据需要设置字体大小。例如,如果字体大小从14px开始,em 2会将其设置为28px。

如果你在px中设置字体大小,你就是在为愤怒的客户设置字体大小,他们在自己选择的浏览器中无法控制字体大小。

我会使用纯css(尽管我会使用一些jQuery/js来实时修改基本字体大小) 使用ems是最好的,尽管在ems层叠过程中它会变得非常令人沮丧。(稍后详细介绍)

您需要在可调整大小区域的顶部设置一个以像素为单位的基本字体大小(标准为12px),其下的所有内容都应在ems中。

现在对于令人沮丧的部分:请记住,如果您有一个字体大小为0.9:em的div;和一个字体大小为0.8em的嵌套段落,则该段落将比预期的更小,因为它的基部将是字体大小为0.9em的div。

一旦你解决了所有这一切,尽管你需要做的是改变基本字体大小像素!

通常,我在body上使用62.5%的内容(所以1em==10px),然后在ems中定义站点上的所有字体大小。对于字体缩放,我做两件事之一:

1. 对主容器div执行jQuery css更改,并设置字体大小百分比。这将以类似的方式更改网站上的所有文本。

2. 在body上执行jQuery类更改以表示新的字体大小。然后,您可以使用CSS规则以不同的方式缩放页面的不同部分(只缩放nav一点、多复制正文等)。