首页 文章

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

提问于
浏览 次
0

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

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;
}
    回复于

相关问题