Question

I am working on a new website and have put a set width into my css file. I have a requirement to make the site adaptable and resizable to fit the smaller screens of phones and various tablet devices.

What in my css styles has to be set so that the site best adapts to the other screen sizes?

Answer 1

You will want to use media queries. This is the whole basis behind responsive design.

@media only screen and (max-device-width: 480px) {
    /* write smartphone styles here */
}

@media only screen and (max-device-width: 768px) {
    /* tablets in portrait mode */
}

@media only screen and (max-device-width: 1024px) {
    /* tablets in landscape mode and smaller/older monitors */
}

Take a look here:
http://coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/