SitePoint Sponsor

User Tag List

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

    From fixed to responsive

    My current web site is 960px wide, and I am looking to switch it over to a responsive layout for tablets and phones. I looked-up some stuff on RWD over the weekend, and I have a good idea of RWD. I just have a few questions to clear-up somethings.

    1. Is it better to set the container to a fixed or to a percentage width in @media screen and (max-width ) section of my CSS file?

    2. How do you deal with tablets and phones that have high pixel density? 1080P on a desktop screen is a lot different then a 1080P on a phone.

    Thanks!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi Welcome to Sitepoint
    Quote Originally Posted by ThePhantom1 View Post
    1. Is it better to set the container to a fixed or to a percentage width in @media screen and (max-width ) section of my CSS file?
    In my opinion it's better not to set any width at all but have a site that has a min width and a max-width set from the start.

    e.g.
    Code:
    #outer{
    min-width:240px;/* or 320 if not worried about smaller phones*/
    max-width:1280px;/* or whatever the max is you want to support*/
    }
    Now all you have to address in your media queries is the elements themselves at the viewport widths where they look awkward or don't fit (just open and close the window until something breaks and then address that problem with a media query for that width.). Don't get tied into device widths as there are to many to cater for now.

    http://www.onextrapixel.com/2012/04/...media-queries/
    http://www.smashingmagazine.com/2013...onsive-design/
    and another


    2. How do you deal with tablets and phones that have high pixel density? 1080P on a desktop screen is a lot different then a 1080P on a phone.
    You don't really need to anything special unless you are talking about hi res images etc. You just cater for the devices in the normal way (as I mentioned above). There may be some elements you may need to tweak such as changing font-size a little but its a matter of testing your design and see how it looks and then tweak accordingly.

    Remember to add the viewport meta tag or the mobile site will just get the large site scaled smaller which is not what you want.

  3. #3
    SitePoint Enthusiast Strider64's Avatar
    Join Date
    Aug 2012
    Posts
    39
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    This is what I do:

    Code:
    /* MOBILE NAVIGATION
    --------------------------------------------------- */
    @media only screen and (max-width: 480px)  {
    
    }
    
    /* TABLET NAVIGATION
    --------------------------------------------------- */
    @media only screen and (min-width: 481px) and (max-width: 768px) {
    
    }
    
    /* SCREEN NAVIGATION
    --------------------------------------------------- */
    @media only screen and (min-width: 769px)  {
       
    }
    I also use Adobe Edge Inspect to see how it looks like on devices.


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
  •