Интересный вопрос. Как в НЕ адаптивном дизайне использовать две вёрстки используя @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;"
Любую страницу можно адаптировать. Это уже от незнания начинаете городить херню.