auto resize text (font size) when resizing window?

by

I’ve had to do this myself. What I did was that I set a base text size for the body, and percentages for all other sizes. I then used a simple jQuery script to change the base size on window resize. The other sizes then update as well.

I used something like this:

$(function() {
    $(window).bind('resize', function()
    {
        resizeMe();
        }).trigger('resize');
    });

and in the resizeMe-function, I had this:

//Standard height, for which the body font size is correct
var preferredHeight = 768;
//Base font size for the page
var fontsize = 18;

var displayHeight = $(window).height();
var percentage = displayHeight / preferredHeight;
var newFontSize = Math.floor(fontsize * percentage) - 1;
$("body").css("font-size", newFontSize);

More Related Contents:

  1. Custom CSS to allow chrome textarea resize smaller than initial state?
  2. Add Content to webpage using only CSS
  3. What will be selector for multi class HTML element in CSS or JQuery?
  4. Why is my jQuery :not() selector not working in CSS?
  5. How can I find elements by text content with jQuery?
  6. Find text string using jQuery?
  7. iframe to Only Show a Certain Part of the Page
  8. $(window).width() not the same as media query
  9. Get element -moz-transform:rotate value in jQuery
  10. Play/pause HTML 5 video using JQuery
  11. jQuery or CSS selector to select all IDs that start with some string [duplicate]
  12. How to automatically change the text size inside a div?
  13. Find text string in jQuery and make it bold
  14. Can I change the scroll speed using css or jQuery?
  15. jquery IE Fadein and Fadeout Opacity
  16. Activate CSS3 animation when the content scrolls into view
  17. jQuery toggle CSS?
  18. jQuery CSS – Write into the -tag
  19. jQuery: height()/width() and “display:none”
  20. Bootstrap throws Uncaught Error: Bootstrap’s JavaScript requires jQuery [closed]
  21. Check, using jQuery, if an element is ‘display:none’ or block on click
  22. How can I tell if a particular CSS property is inherited with jQuery?
  23. Creating a hole in a element
  24. Can an iframe only show a certain part of the page?
  25. jQuery Animation – Smooth Size Transition
  26. Apply CSS to jQuery Dialog Buttons
  27. CSS issue on Twitter Typeahead with Bootstrap 3
  28. How to keep footer at the bottom even with dynamic height website
  29. Use jQuery to Detect Container Overflow?
  30. CSS Transition Not Firing

Leave a Comment