0

我正在制作一个主要使用 rem 单位作为字体大小单位以及其他属性（宽度、高度、边距等）的网站。该网站的功能之一是 #mainContent 的大小发生变化，这是由更改 html 标签中的字体大小：

CSS：

html, body {
    font-size: 100%;
}

javascript:

$("#mainContent").mousewheel(function(event, delta, deltaX, deltaY) {
    var fontSize = parseInt(($("html").css("font-size")).match(/\d+/));
    if (deltaY > 0) { // if scroll up:
    $("html").css("font-size", ((fontSize * 1.2) / 16) * 100 + "%");
    }
    else if (deltaY < 0) { // if scroll down:
    $("html").css("font-size", ((fontSize * 0.8) / 16) * 100 + "%");
    }
});

问题是，当 #mainContent 重新调整大小时，即使我指定了它们的大小，引导程序的导航栏大小（不是字体大小）和模态字体大小也会发生变化，因此它们不会受到影响：

.container-full {
    font-size: 100%;
}

如何确保只有 #mainContent 受到影响，而不是所有其他元素？谢谢

4

0 回答 0