www.webdeveloper.com
Results 1 to 3 of 3

Thread: CSS Type Auto Re-Size

  1. #1
    Join Date
    Feb 2011
    Posts
    177

    Question 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

    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>
     
    <body>
    <div id="body">
        <div id="header"></div>
        <div id="main">
            <div id="content-1">Light</div>
            <div id="content-2">
              <div id="content-2-1">Of</div>
                <div id="content-2-2">Life</div>
            </div>
        </div>
        <div id="footer">Photography.net</div>
    </div>
    <div id="min">Content for  id "min" Goes Here</div>
    </body>
    </html>
    <code>
    #body {
    	width: 100%;
    	min-width: 300px
    	font-family: 'Fjalla One', sans-serif;
     
    }
    #content-1 {
    	float:left;
    	font-size: 3em;
    	color: #ABBC6B;
    	font-weight: bold;
    	margin-left: 2px;
    	margin-top: 15px;
    	width: 35%;
    }
    #content-2-1 {
    	float:left;
    	font-size: 2.75em;
    	font-weight: bolder;
    	color: #D6CDBE;
    	margin-top: 35px;
    	padding: 2px;
    	width: 20%;
    }
    #content-2-2 {
    	float:left;
    	font-size: 3em;
    	color: #ABBC6B;
    	font-weight: bold;
    	margin-left: 25px;
    	margin-top: 25px;
    	width: 40%;
    }
    #footer {
    font-size-adjust: .59;
    	font-weight: bold;
    	color: #E7AC5C;
    	width: 100%;
    	min-width: 300px;
    	text-align: left;
    	float: left;
    	padding-top: -10px;
    	margin-top: -35px;
    }
    #min {
    	float: left;
    	width: 300px;
    	border: thin solid #000;
    }

  2. #2
    Join Date
    Aug 2012
    Posts
    155
    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.

  3. #3
    Join Date
    Mar 2012
    Posts
    931
    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.:

    html
    ----

    <head>
    <title>media-specific demo</title>
    <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">
    </head>
    <body>
    <div>
    <p class="body-text">
    blah, blah, blah</p>
    </div>
    </body>

    handheld.css
    ------------

    .body-text {
    font-size:12px;
    }

    screen.css
    ----------

    .body-text {
    font-size:16px;
    }

    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!
    Last edited by jedaisoul; 02-22-2013 at 03:22 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles