Resize DIV on font resize

2018-07-01 09:10:40

I have the following CSS settings:

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

How can I resize these elements in increments (up until 100% of the browser window) to fit the text when the user clicks on the font-resize button? My font-size at default is 16px. When the user increases the font at this stage then the elements need to be resized (ie on page load). However when the user sizes down to 16px (and anything below it) then the default sizes should be restored.

Here is my JavaScript code:

 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;
  });

To size any element with the size of the font, give the element a size in em . That's all there is to it.

In your example:

.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;
}

链接地址: http://www.djcxy.com/p/87520.html

上一篇: 根据div宽度调整文本大小