CSS Type Auto Re-Size
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="Header.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' 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)
<div id="min">Content for id "min" Goes Here</div>
font-family: 'Fjalla One', sans-serif;
border: thin solid #000;
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.:
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css" title="styles" type="text/css">
<link rel="stylesheet" href="handheld.css" media="handheld" title="styles" type="text/css">
<link rel="stylesheet" href="handheld.css" media="screen and (max-width:639px)" title="styles" type="text/css">
<link rel="stylesheet" href="screen.css" media="screen and (min-width:640px)" title="styles" type="text/css">
blah, blah, blah</p>
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!