允许用户更改网页中的字体大小

Question

我希望能够改变网页中文本的大小,我想jQuery可以使用,但我没有javascript经验.

另一个问题是网页是一个phtml文件,并且使用了多个php echo命令.该页面由多个phtml文件组成.

编辑:我想为用户提供3种不同字体大小的选择.

Answer 1

我将采用的方法是将字体大小百分比应用于html的body标签

body
{
    font-size: 62.5%;
}

然后为所有其他元素指定ems中的font-size,它将生成的大小作为继承字体大小的按比例放大的百分比

h1
{
    font-size: 1.8em;
}

p
{
    font-size: 1.2em;
}

我在身体上使用了62.5%,因为在指定其他字体大小时很容易将其转换为像素大小,例如1.2em = 12px,1.8em = 18px等等

然后以编程方式更改页面中的字体大小,您只需更改正文上字体大小的值,页面的其余部分将相应地向上或向下缩放

你可以通过有三个div来测试这个

<div id="sizeUp">bigger text</div>
<div id="normal">normal text</div>
<div id="sizeDown">smaller text</div>

在JQuery中,我相信你能做到

$(document).ready(function() {

    $("#sizeUp").click(function() {

        $("body").css("font-size","70%");

    });

    $("#normal").click(function() {

        $("body").css("font-size","62.5%");

    })

    $("#sizeDown").click(function() {

        $("body").css("font-size","55%");

    })
});