Printable View
Hi, I stumbled on a problem, I am playing with responsive design, all my div, h and p elements are in percentage, so they all resize properly. but how do I do the same with font size? I read that em and percentage are good for resizing, but I tried it and it doesn't do a thing, what did I do wrong?
Hard to tell without seeing your code. Are you setting percentages for the elements the text is in (including the body) as well as the 'em' sizes for the font?
http://kyleschaeffer.com/user-experi...s-px-vs-pt-vs/
Thanks for the reply.There is no need to see my code, I just need to know in general how to make the font size re sizable base on how visitors resize their browser windows.
let's say a div Width is 80% and Height is 20%, the div resizes as expected but the text within is unaffected whether I use font-size 100% or 1em.
From the top of my head:
This is not possible to do without Javascript. The idea of font in the web browser is to be fixed once it is fully loaded, resizing windows will not resize the font. There is no good UI reasoning in having it resized as the browser resized. Personally i find it better that the font is not resized, because when I resized, I simply want to hide some text or show some text. You are better off putting a zoom button, so the user can choose if he/she wants to enlarge the font size.
Now, I also did a Google Search. All of them points to javascript:
There is another thread on this forum you can read http://www.webdeveloper.com/forum/sh...-size-changes.
You can use JQuery to do the trick you wanted:
http://stackoverflow.com/questions/2...esizing-window
Another JQuery, possibly not really related to your question, but a good implementation.
http://stackoverflow.com/questions/6...size-container
A zoom button solution for you
http://mirificampress.com/permalink/...and_javascript
The basic of font sizing for a page
http://robertnyman.com/2007/02/27/ho...ntly-with-css/
Good luck!
Might be of some help:
http://responsivepx.com/
Convert em,px,pt and % in CSS: http://www.getallfix.com/2011/11/con...pt-and-in-css/
FitText.js plugin (FitText is a jQuery plugin that makes your font-sizes flexible, allowing headlines to automatically-expand to fit the available space): http://fittextjs.com/
Adapt.js - Adaptive CSS: http://adapt.960.gs/
Beginner’s Guide to Responsive Web Design: http://thinkvitamin.com/design/begin...ve-web-design/
What The Heck Is Responsive Web Design? (A super-impressive CSS3 presentation built on impress.js, demonstrating the basics of Responsive Web Design): http://johnpolacek.github.com/WhatTh...ressjs/#/title
Creating Responsive HTML5 Touch Interfaces: http://www.youtube.com/watch?v=lcD9CF0bxyk
Responsive Images: How they Almost Worked and What We Need: http://www.alistapart.com/articles/r...-what-we-need/
Responsive Tables: http://www.zurb.com/playground/responsive-tables
