Как сделать мобильную версию сайта?

Question

[zebralaska]

Есть сайт city-vikup.ru. Хочу сделать мобильную версию. Никогда раньше не делал. Кто подскажет, что да как?

Answer 1

[sergski]

Если по быстрому, то с помощию media queries заменить на нужной максимальной ширине экрана (например 900px) все width в пикселях у div-ов на auto или 100% и в head добавить

<meta name="viewport" content="width=device-width; initial-scale=1.0">

Т.е

@media screen and (max-width: 900px) {
.art-sheet {width: auto}
}

и тп.

Comments

[zebralaska]

1) а этот media queries дополнительно нужно устанавливать?
2) или просто копировать и вставить что вы написали и все?
3) а что значит и тп. - вы в конце написали? то есть это не все действия которые нужно сделать?

[sergski]

1,2)Только то, что написано.
3) тп. -- речь о том, что найти все классы у div с фиксированной шириной и заменить на {width: auto} как в примере c .art-sheet

[zebralaska]

sergski, может вы мне накидаете по-быстрому ?)
а то я оооооооооооооооооочень долго соображаю)

[zebralaska]

sergski, хочу чтобы было как в мобильной версии на этом сайте car-out.ru
ЛОГОТИП-номер телефона-ЗАЯВКА-статья

[sergski]

zebralaska, даже если не углубляться в детали, там не на полчаса работы) + тестирование чтобы все ок было на всём сайте

Answer 2

[Павел Волынцев]

www.liquidapsive.com примеры разных версий вёрстки, переключи в режим "Responsive" и всячески меняй размеры окна браузера - увидишь, как блоки перемещаются, подстраиваясь под ширину экрана

Подробности по терминологии
Подробности про реализацию в CSS и HTML

Comments

[zebralaska]

а что конкретно в моем сайте нужно изменить autob-u-msk.ru/?

[Павел Волынцев]

zebralaska: переверстать, а именно - разбить контент по сетке, сделать его в 2-3 колонки, потом через правила CSS media настроить, как эти колонки будут выглядеть на узком экране - рядом, или друг под другом, или друг над другом (слои с разным z-index), или прятаться сбоку в выпадающую панель, или вообще отсутствовать. Как фантазия подскажет.

[zebralaska]

Павел Волынцев, А как сделать чтобы при просмотре на мобильном устройстве была мобильная версия, а на компьютере обычная?

Answer 3

[Антон Агальцов]

Варианты:
1) Сверстать адаптивно текущий сайт, к примеру на bootstrap
2) Взять специальный Фреймворк на подобии jquery Mobile - в целом вопрос освящен здесь Мобильный веб-фреймворк