Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    tbr
    tbr is offline
    New Coder
    Join Date
    Sep 2005
    Location
    sweden
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Using different stylesheets for different resolutions?

    Hi, I'm making a website where I want to use a different font size for different screen sizes, or actually rather, different window sizes. As an example, if the window is more than 1000 pixels across I might want to use a really big font size, if it's between 1000 and eg 700 pixels I want a slightly smaller one, and if it's below 700 pixels across I want an even smaller one. Is there any way to put only the size dependent css statements in three separate style sheets and load a different one depening on what size the window is? It doesn't have to change if the user changes the window size after the page has loaded.

    Thanks!

  • #2
    New Coder
    Join Date
    Apr 2006
    Location
    Pakistan
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, There is a way to use in a PHP enviornment but you had to do many things in this condition.

    You will have to use function that would detect the resolution of the user computer first and will have to use if and else functions.

    I suggest rather then this you should use percentages to detect the font sizes,widths and etc to fit in every type of resolution.

    Try like
    Code:
    font-size : 10%;
    in your stylesheets.

  • #3
    tbr
    tbr is offline
    New Coder
    Join Date
    Sep 2005
    Location
    sweden
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Nope, percentage on font sizes doesn't seem to change with the window size... at least not in Safari.

    But should't it be rather simple to make a javascript in the head that checks the size, and does a document write that imports the relevant style sheet? I just don't know how to do it in practice.

  • #4
    New Coder
    Join Date
    Apr 2006
    Location
    Pakistan
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Its late night in here and tommorow i will be able to find you codes for your purpose.

  • #5
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #6
    tbr
    tbr is offline
    New Coder
    Join Date
    Sep 2005
    Location
    sweden
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by harbingerOTV
    Yes, that seems to be exactly what I wanted!

    Thank you both for helping!

    EDIT: No wait... that was in respect to the screen size, which doesn't necesarily have anything to do with how much window space there is... hmm. How would I modify it to adapt to window size instead?
    Last edited by tbr; 04-30-2006 at 11:52 AM.

  • #7
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Let's start with the 3 css pages I used.

    small css:
    Code:
    p {
    font-size: 80%;
    color: #d6f;
    }
    medium css:
    Code:
    p {
    font-size: 120%;
    color: #fc3;
    }
    high css:
    Code:
    p {
    font-size: 160%;
    color: #6cd;
    }
    now the page if you don't want it to resize the text if they later resize the window:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <link rel="shortcut icon" href="favicon.ico">
    <title>???</title>
    <style type="text/css" media="screen,projection">
    p {
    font-family: tahoma, helvectia, sans-serif;
    }
    </style>
    <script language="Javascript">
    if (document.documentElement.clientWidth < 900) {
    	document.write('<link rel=stylesheet type="text/css" 
    
    href="small.css">');
    }
    if (document.documentElement.clientWidth >= 900 && 
    
    document.documentElement.clientWidth < 1100) {
    	document.write('<link rel=stylesheet type="text/css" 
    
    href="medium.css">');
    }
    if (document.documentElement.clientWidth >= 1100) {
    	document.write('<link rel=stylesheet type="text/css" 
    
    href="high.css">');
    }
    </script>
    	
    </head>
    <body>
    <p>
    A whole bunch of text for testing.
    </p>
    </body>
    </html>
    works in FF, IE6 (strict doctype) and Opera. Other than that Im not sure.

    If you want it to resize on resize it requires a function.

    If it's buggy maybe move the whole discussion over to the Javascript forum and see what they can do to help you out.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #8
    tbr
    tbr is offline
    New Coder
    Join Date
    Sep 2005
    Location
    sweden
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Big thanks! Works perfectly when I adapted it to my purpose.


  •  

    Posting Permissions

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