Question

我有以下CSS设置：

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

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

这是我的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;
  });

Answer 1

要使用字体大小调整任何元素的大小，请为元素指定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;
}

在字体调整大小时调整DIV大小

1 个答案: