I have been trying(in vain) to build a page whose elements would resize as I changed the window size. I have it working in css for images no problem, but I can't seem to accomplish the same for text, and I am not sure it is even possible in CSS. And I can't seem to find a jquery script that accomplishes this.
When a user resizes the window, I essentially want the page to scale dynamically and fluidly, without the user having to invoke page zoom. This works fine on my img divs via css, but not for the text, which stays the same size.
Any ideas?
To prevent a text field from being resized, you can use the CSS resize property with its "none" value. After it you can use the height and width properties to define a fixed height and width for your <textarea> element.
Syntax: font-size-adjust: number|none|initial|inherit; Below are the examples that illustrates the use of font-size-adjust property.
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);
Try a jQuery plugin like FitText. It automatically sizes text to fit the width of the parent element.
Another jQuery plugin with the same goal is BigText (demo).
You can do this with CSS3 media queries, specifying different base font-sizes depending on browser size. There is a good article for this on A List Apart
For IE support you might be able to hack it using CSS expressions
This requires you to use a fixed base font-size, for instance on the body
tag, and percentage or em
based sizes elsewhere.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With