Resize DIV on font resize

Question

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 (i.e. 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;
  });

I want increase div size incrementally (up until a limit of the browser width of 100%) when font-size is increased from the default of 16px - then decrease it back to 768px when font-size is equal to 16px or less (i.e. on font decrease) — The Shizy
then you must define font-size of body/html in '%' and the width of the div in 'em'. — Mandeep Pasbola
If you use the em measurement for the width of the div (48em? Which is 768px / 16px). Then the div will scale as the pages font size changes. This might help: css-tricks.com/why-ems - You don't need to use JavaScript to resize both. — Olical

Mr Lister Mr Lister · Accepted Answer · 2013-02-19T17:19:05

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

Resize DIV on font resize

1 Answers