调整字体大小时调整 DIV 大小答案

【问题标题】：Resize DIV on font resize调整字体大小时调整 DIV 大小
【发布时间】：2013-02-19 12:29:46
【问题描述】：

我有以下 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;
  });

【问题讨论】：

你只想增加/减少字体大小
我希望在 font-size 从默认值 16px 增加时逐渐增加 div 大小（直到浏览器宽度限制为 100%） - 然后在 font-size 为时将其减小回 768px等于或小于 16 像素（即字体减小）
那么你必须在'%'中定义body/html的字体大小和在'em'中定义div的宽度。
你能用我的代码给我看一个例子吗
如果您使用 em 测量 div 的宽度（48em? 即768px / 16px）。然后 div 将随着页面字体大小的变化而缩放。这可能会有所帮助：css-tricks.com/why-ems - 您无需使用 JavaScript 来调整两者的大小。

标签： jquery css

【解决方案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;
}

【讨论】：