CODEWITHSUNDEEP
iphonehtmlcssipad
Genadinik
Genadinik

Reputation: 18629

How to make a site adapt to sizes of phone and iPad screens?

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?

Upvotes: 4

Views: 6207

Answers (1)

swatkins
swatkins

Reputation: 13630

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/

Upvotes: 4

Related Questions