SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Feb 2011
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Using JS to detect window width and change css

    I know 800x600 screens occupy a shrinking part of Web surfers, but I want to accommodate them by offering an alternate style sheet where my site pages don't break when someone from this smaller group visits. Yes, there are examples of how to do this on the Web, but I have one more requirement and don't know how to code it. Not only do my pages break on 800x600, they also break if the browser widow is sized smaller on a 1024x768 screen. (I'm studying css that will dynamically respond to this but I'm not there yet.)

    Do I just need an appropriate if/or statement to deliver different style sheets? Is there even a JS that detects browser window changes?

  2. #2
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,083
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    Sounds to me like you're looking for CSS Media Queries.

    There's a very good article about it over at ALA: A List Apart: Articles: Responsive Web Design
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  3. #3
    SitePoint Member
    Join Date
    Feb 2011
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's an excellent suggestion. I have read other A List Apart articles and they're always top notch.


Tags for this Thread

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
  •