From fixed to responsive

HTML & CSS
1

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

Hi Welcome to Sitepoint :slight_smile:

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.


#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.smashingmagazine.com/2013/03/01/logical-breakpoints-responsive-design/[URL=“http://www.amberweinberg.com/responsive-design-isnt-breakpoints/?utm_source=Responsive+Design+Weekly&utm_campaign=1936a80cba-Responsive_Design_Weekly_69&utm_medium=email&utm_term=0_df65b6d7c8-1936a80cba-58966777”]
and another

  1. 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

This is what I do:

/* 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.