Question

我正在为主要针对老年人的客户设计一个网络应用程序。他们想要一种功能，在点击按钮时，整个项目的字体大小增加/减少。

这样做的最佳方法是什么？我能想到的唯一解决方案是，为每个页面提供切换按钮，然后使用jquery执行类似

的操作

...
$('body').css('font-size', '20px');
...

我不确定这是否是一种优雅的方法，因为各种p, h1, h2...分配了不同的字体大小，这将涉及每个页面的点击而不是一般的点击。

Answer 1

很简单，在body下降的所有元素上使用相对字体大小 - 这是所有上下文元素。

body{
    font-size: 20px; /*This is our default*/
}

h1{
   font-size: 1em; /*Relative to the body, this will also be 20px*/
}

h2{
   font-size:0.8em; /*This will be 20 * 0.8 = 16px;*/
}

h3{
   font-size:80%; /*This is the same thing as above - 20 * 80% = 16px; */
}

h1.huge{
    font-size:1.2em; /*This one will be 20 * 1.2 = 24px */
}

所以现在我们已经开始了舞台。所有元素都具有基于body的相对字体大小。现在，您需要做的就是调整每个元素的字体大小，以便在点击时调整body元素的字体大小：

var button = document.getElementById('.myButton');
button.addEventListener('click', function(){
    var body = document.querySelector('body');
    body.style.fontSize = '25px';
});

（您也可以通过localStorage或只是一个Cookie来获取幻想并跟踪此按钮的点击，以便在页面中记住此选项。

现在我们的尺码会像这样解决：

h1{
   font-size: 1em; /*25px*/
}

h2{
   font-size:0.8em; /*This will be 25 * 0.8 = 20px;*/
}

h3{
   font-size:80%; /*This is the same thing as above - 24 * 80% = 20px; */
}

h1.huge{
    font-size:1.2em; /*This one will be 25 * 1.2 = 30px */
}

注意：相对字体大小实际上是根据父元素计算的，不一定是body。这意味着如果您为具有相对字体大小的父元素定义了相对字体大小，则需要进行一些数学运算：

body{
    font-size:25px;
}

div.container{
    font-size: 0.8em; /* 20px if a child of body */
}

div.container > p{
    font-size:0.8em; /* 25px * 0.8 * 0.8 = 16px; */
}

单击时增加整个项目的字体大小

1 个答案: