В метатэгах прописать виевпорт, чтобы мобильный браузер отображал пиксели 1к1, а не уменьшал страницу по своему усмотрению - это первый этап.
Второй этап - в CSS прописать размеры нужных дивов при разных разрешениях экрана при помощи медиа-запросов цсс. Я вообще некоторым блокам под десяток размеров прописываю под разные разрешения для комфортного отображения.
О теге виевпорт и медиа-запросы цсс инфы полно, нужно лишь напрячся, вникнут.
На мой взгляд самый отличный метод адаптации: изменяется только цсс, ну и виевпорт добавляется на страницу. Ну это если все параметры у вас в цсс вынесены, а не прописаны размеры и прочее прямо в коде хтмл.
Вот например фрагмент цсс
Код |
---|
@media (max-width: 700px) {
.menu span {margin: 10px;}
.pravblok {display: none;}
.content {width: 100%;}
.podval span {display: none;}
}
|
Данная команда медиа работает с разрешениями до 700 пикселей, если ширина экрана больше, стили перестают учитываться браузером. Можно создать этих медиа сколько угодно, хоть через каждые 10 пикслей создавать свои правила.