#php #javascript #html #css #responsive-design
#php #javascript #HTML #css #адаптивный дизайн
Вопрос:
Я изучаю адаптивный веб-дизайн и сталкивался со многими методами для этого, однако я изо всех сил пытаюсь определить наилучший способ сделать это.
Мне действительно нравится, как работают эти два сайта:
Однако я не могу понять, как динамически меняются их макеты. Есть ли техника, которую мне не хватает, которая не указана ниже?
До сих пор я сталкивался со следующими методами:
1: Javascript
Пример — adapt.js
Динамически определяет разрешение экрана и выбирает соответствующую таблицу стилей.
2: Медиа-запросы CSS3
Используя технику, подобную:
@media only screen and (max-width: 480px) and (min-width: 320px) {
}
3: Серверная часть
Пример — Добавление файлов PHP
Действительно работает только для одной мобильной версии сайта, зеркально отображая исходный домен и изменяя заголовки.
Комментарии:
1. Что насчет этих сайтов? Кажется, они не делают ничего впечатляющего. Они переносят свой контент, когда мало места, но при хорошем дизайне это происходит автоматически. Каких конкретных результатов вы хотите, и как вы их не достигаете?
2. @GolezTrol: Посмотрите внимательнее; это не обычная упаковка.
3. Я вижу, вы правы. paulrobertlloyd.com / кажется, использует некоторые хитрости Javascript для определения правильных размеров. Вы можете увидеть это, когда сжимаете браузер, пока не увидите только собачку, а затем измените ее размер, чтобы открыть нужное меню. Заголовки будут увеличиваться и уменьшаться, пока не примут нужный размер.
4. Нет; это не Javascript; это чистый CSS.
Ответ №1:
Оба этих сайта используют медиа-запросы, как вы можете видеть в нижней части их соответствующих CSS-файлов.
Комментарии:
1. Ах да, спасибо, я это полностью пропустил. Я проверял Firebug, и он не показал, что существует уменьшенный файл CSS!
Ответ №2:
Обычно это называется эластичным CSS.
Здесь есть основа для этого: http://elasticss.com / Однако я должен сказать, что я никогда не пользовался им лично, так что, возможно, есть что-то получше.