Как заставить сайт адаптироваться к размерам экрана телефона и iPad?

Question

Я работаю над новым сайтом и установил заданную ширину в мой файл CSS. У меня есть требование сделать сайт адаптируемым и изменяемого размера, чтобы соответствовать меньшим экранам телефонов и различных планшетных устройств.

Что в моих стилях CSS должно быть установлено, чтобы сайт лучше адаптировался к экранам других размеров?

Answer 1

Вы хотите использовать медиа-запросы.Это вся основа адаптивного дизайна.

@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 */
}

Взгляните сюда: http://coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/