Hi, I am new to CSS in some ways and old to is in others. However I am redoing my site so that it is a Responsive design. I have played around with % and Ems but it am not having any luck. Pretty much I want to font to change depending on the screen size. Max-Width: 1200px Min-Width: 300px. However no matter how I play with the fonts and div tags the font is not adjusting to the screen sizes any ideas or suggestions on how to do this. I think maybe you have to incorporate Java Script (No clue on that) Any suggestions or hits are much appreciated. (The code below is like the 5th or 6th time playing around with it so it may be all messed up by now lol! Cool
HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title> <link href="Header.css" rel="stylesheet" type="text/css"> <link href='http://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'> <style type="text/css">
{
@import url(<a href="http://fonts.googleapis.com/css?family=Fjalla+One" rel="nofollow">http://fonts.googleapis.com/css?family=Fjalla+One</a>);
@media screen and (min-width:300px) and (max-width: 1200px)
} </style> </head>
Unfortunately (from trying to do the same thing) you generally have to use javascript (I can't remember what now). However, I suppose if you change your base font size in your media queries then the rest of your fonts will adjust based on their em/% of the base font (hope I am making sense). For example, if your base font at a 'normal' screen res is 16px (the default for most browsers) then you would need to change that to something like 12px for a mobile screen size.
02-22-2013, 02:24 PM
jedaisoul
I do not understand why you want to do this??? It makes sense to change the size of graphics according to the screen size, but not changing the font size. At least, not to me. I'd suggest that you do a demo page with different font sizes, and view it on devices with different screen sizes and pixel pitches. I haven't tried it, but I suspect that you may find that the pixel pitch is more important than the screen size.
That said, I do not think you need to use JS to achieve this. Media-specific CSS files should do the trick? E.g.:
By the way: For demo purposes, I've used "max-width" and "min-width" in the style sheet selection. That means that it will toggle between the pixel sizes according to the WINDOW width. To make it respond to the SCREEN width, use "max-device-width" and "min-device-width".
Note: IE8 and below are not media-specific, so this will not work on older versions of IE!
