Top.Mail.Ru
Ответы

Интересный вопрос. Как в НЕ адаптивном дизайне использовать две вёрстки используя @media ?

Имеется сайт с 3-я страницами жёсткой вёрсткой 1000px. На больших экранах отображается хорошо. Теперь надо сделать отзывчивую вёрстку для остальных устройств.

Только на 1-ой из 3-х страниц удалось использовать относительные величины в процентах. На двух других нет. В результате имеем :
1) 1-я страница жёсткая 1000 px
2) 2-я страница жёсткая 600 px
2) 3-я страница относительными величинами (с ней будёт всё в порядке на всех разрешениях)

Итак: в head прописываем :
1)
(чтобы во весь экран масштабировалась 1-я страница)
2) Для второй страницы в cтилях пишем :

@media screen and (max-width: 1000px) {
@viewport { width: 600px; } // масштабирует окно до 600 пикселей
@-ms-viewport { width: 600px;}
@-o-viewport { width: 600px;}
...
}

Почему не работает масштабирование на второй странице? Какие ещё возможны решения в такой ситуации?

Дополнен

Редактор не пропустил метатег дополню здесь без тега:

Итак: в head прописываем :
meta name="viewport" content="width=1000px;"

По дате
По рейтингу
Аватар пользователя
Мудрец
9лет

Любую страницу можно адаптировать. Это уже от незнания начинаете городить херню.