How can I create HTML pages that automatically adjust their images to different mobile screen sizes?

Question

I want to create some HTML pages which will be displayed on different mobile devices. I want them to automatically adjust to different mobile screen sizes.

The HTML page

Answer 1

Media queries are the best way to do what you want.

Set up your html and stylesheet as usual, but at the end of your CSS document use something similar to the code below. You will need to work out the different queries for the different device widths and layouts, but this should get you started.

/* iPHONE 3-4 + RETINA PORTRAIT STYLES */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (max-device-height: 480px) and (orientation:portrait) {
    /* Your adjusted CSS goes here */
}

/* iPHONE 3-4 + RETINA LANDSCAPE STYLES */
@media only screen and (max-device-width: 480px) and (min-device-width: 320px) and (max-device-height: 480px) and (orientation:landscape) {
    /* Your adjusted CSS goes here */
}