0

我有以下 CSS 设置：

.header_wrapper, .navbar_wrapper, .body_wrapper, .footer_wrapper {
    display: table;
    width: 768px;
    margin-left: auto;
    margin-right: auto;
}

当用户单击字体调整大小按钮时，如何以增量（直到浏览器窗口的 100%）调整这些元素的大小以适应文本？我的默认字体大小是 16px。当用户在这个阶段增加字体时，元素需要调整大小（即在页面加载时）。然而，当用户的尺寸缩小到 16 像素（以及低于它的任何尺寸）时，应该恢复默认尺寸。

这是我的 JavaScript 代码：

 var originalFontSize = $('html').css('font-size');
    $(".resetFont").click(function(){
    $('html').css('font-size', originalFontSize);
  });
  // Increase Font Size
  $(".increaseFont").click(function(){
    var currentFontSize = $('html').css('font-size');
    var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*1.2;
    $('html').css('font-size', newFontSize);
    return false;
  });
  // Decrease Font Size
  $(".decreaseFont").click(function(){
    var currentFontSize = $('html').css('font-size');
    var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*0.8;
    $('html').css('font-size', newFontSize);
    return false;
  });
4

1 回答 1

2

要使用字体大小调整任何元素的大小，请为元素指定一个大小为em. 这里的所有都是它的。

在您的示例中：

.header_wrapper, .navbar_wrapper, .body_wrapper, .footer_wrapper {
    display: table;
    /* if we assume font size is 16 px, width will be 768 px */
    width: 48em;
    margin-left: auto;
    margin-right: auto;
}
于 2013-02-19T17:19:05.273 回答