Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: CSS depending Screen Resolution ?

  1. #1
    Join Date
    Aug 2006
    Posts
    44
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question CSS depending Screen Resolution ?

    Hello,

    It's possible to set a different CSS sheet depending of screen resolution?

    Thanks,
    Chris

  2. #2
    Join Date
    Jan 2008
    Posts
    4,167
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Yes, it is. I think thats what the % is for.
    Jeremy | jfein.net

  3. #3
    Join Date
    Aug 2006
    Posts
    44
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thanks Nile, but my question was not about CSS value (%).
    I would like to know how to select/apply automatically a different CSS SHEET (a full sheet, not just a value) to a Web page, depending of screen resolution... could be via JavaScript?

  4. #4
    Join Date
    Jan 2008
    Posts
    4,167
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    I don't really get what you want still.
    You can get the screen hight and width like this[js]:
    Code:
    var h = (screen.height);
    var w = (screen.width);
    document.write(h + w);
    Jeremy | jfein.net

  5. #5
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,319
    Thanks
    30
    Thanked 136 Times in 131 Posts
    Blog Entries
    29

    Default

    Quote Originally Posted by chrbar View Post
    Hello,

    It's possible to set a different CSS sheet depending of screen resolution?
    Thanks,
    Chris
    You probably mean something like this:
    Code:
    <script type="text/javascript">
    if(screen.height>600) {
    document.write('<style type="text/css">');
    document.write('.demo {font-family:comic sans ms;text-decoration:none;background-color:transparent;font-size:12px;}');
    document.write('body{margin-top:30px;}');
    document.write('</style>');
    } 
    </script>
    Arie Molendijk
    Last edited by molendijk; 03-31-2008 at 10:46 AM. Reason: Correction

  6. #6
    Join Date
    Jan 2008
    Posts
    4,167
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Why do you have numerous document types when you can put them all in one function?
    Jeremy | jfein.net

  7. #7
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,162
    Thanks
    263
    Thanked 690 Times in 678 Posts

    Default

    chrbar, what Molendijk posted is what you want, or some variation. However, just using percentage based layouts is best. Someone can change the size of the window, or they can have a strange shape. Mostly, though, you just simply can't account for all sizes: mobile? really large? widescreen?

    As a random note, I'm running widescreen 1440x900 right now. What resolution will that get?

    The idea makes sense, but only use it with caution because it will probably cause more problems than it solves.

    If you do something like this, then I'd suggest basing it very roughly on the size and maybe have a small and a large version. But, really, it makes sense to just design your site with percentage based layouts and sliding parts, with backgrounds, etc, so it all fits.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  8. #8
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,319
    Thanks
    30
    Thanked 136 Times in 131 Posts
    Blog Entries
    29

    Default

    Quote Originally Posted by djr33 View Post
    ...But, really, it makes sense to just design your site with percentage based layouts and sliding parts, with backgrounds, etc, so it all fits.
    I agree. But sometimes you may want a fixed pixel-height/-width indeed for your text when using a certain screen resolution.
    ----
    Arie.

  9. #9
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    Quote Originally Posted by molendijk View Post
    I agree. But sometimes you may want a fixed pixel-height/-width indeed for your text when using a certain screen resolution.
    ----
    Arie.
    the only time I could see you wanting a fixed height / width is if you wanted to limit the maximum or minimum screen resolution values, in which case you could use a css property inside your body tag
    Code:
    body {
        width: 100%;
        min-width: 770px; /* For 800x600 screen resolution */
        height: 100%;
        min-height: 570px; /* For 800x600 screen resolution */
        overflow: auto; /* Adds scrollbar if necessary */
    }
    this would allow the developer to limit the minimum or maximum screen width and height, however it is important to note, min-width and min-height CSS1 properties are not supported by IE6 and below. (Go Figure)

  10. #10
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    I've actually done this on a current site I'm working on.

    Reason?
    While, the general principal of using CSS percentages for all layout is something I wholeheartedly agree with, there are some situations that warrant a different approach.

    The site I'm working is for an online literary magazine. So, there's a lot of content that needs to be presented. My goal was to best capatilize on screen space to show different types of content in different interactions. Plus, I like the hidden gems in web design. I always try to add a little something that isn't obvious (nor essential) but once you find it, it's kind of cool.

    Back to my first point...fluid design is always the first choice. In fact, if you're not changing the layout, I urge you to go that route. But if, like I did, you're changing the actual layout and want to give a different experience to folks with a different resolution, then this approach will work (it has for me, at least).

    How to?
    I used Cameron Adams' (The Man in Blue) technique -- found here.

Bookmarks

Posting Permissions

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