Медиа-запросы VS. жидкостные сетки для различных мобильных форматов

Question

Этот пост посвящен не синтаксису кода, а стратегии работы, прежде чем я начну разработку сайта.

Если мне нужно спроектировать внешний интерфейс мобильного сайта для смартфонов (Android {3 разных размера}, iPhone {2 разных размера} и других телефонов, не относящихся к смартфонам), как мне поступить? (МОЙ ДИЗАЙН ДОЛЖЕН РАБОТАТЬ И БЫТЬ ЖЕ ДЛЯ ВСЕХ ЭТИХ УСТРОЙСТВ)

1 - я должен разработать свою работу, следуя идее о гибких изображениях и жидкостных сетках (гибкие DIV: s).

или

2 - установить разные размеры медиазапросов для каждой целевой модели? (это решение может создать больше работы для разработки, не так ли?)

Большое спасибо за ваши мысли ...

Answer 1

@ YoniGeek; может быть, вам придется использовать fluid layout.

Для этого просто определите screen width вместо device width и определите css для maximum device размера экрана. Так; Вам не нужно определять разные css для разных устройств.

Прочитать эту статью http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

Проверьте этот сайт для вдохновения http://mediaqueri.es/ и выглядите одинаково на всех устройствах.

Answer 2

Это действительно вопрос предпочтений.Вы можете использовать гибкий дизайн, медиазапросы (с переходами CSS) или комбинацию всех методов.

В моем последнем проекте я использовал медиазапросы.Как только я сделал базовый дизайн, мне потребовалось меньше часа, чтобы он работал с различными разрешениями от 240 до 960 пикселей в ширину.Так что больше работы по разработке ... это не было.

Моя предыдущая рекомендация по одному из ваших предыдущих вопросов все еще стоит:

1. Дизайн (т.е.: один файл design.css или разделить его на несколько файлов, таких как fonts.css, typography.css и т. д.), не располагая ничего.Вы можете начать со сброса HTML 5, реализовать шрифтовые грани, установить фоны, покрасить ссылки, стилизовать вводы, но ничего не располагать (т. Е. Если у вас есть разделы заголовка, навигации, содержимого и нижнего колонтитула, не размещайте их).

2. Используйте медиазапросы (то есть: layout-240.css, layout-960.css), чтобы настроить таргетинг на свои области просмотра и расположить каждый из них соответствующим образом.Обычно они содержат менее 100 строк CSS и занимают менее 3 КБ дискового пространства, но это не имеет значения.

Answer 3

Сначала используйте жидкостные сетки.Затем вы можете использовать медиа-запросы, чтобы сделать некоторые последние изменения.Например, плавающее изображение вправо, если есть место (ландшафтный режим).

Таким образом, вы поддерживаете практически все устройства, а не только большие 2 (хотя я думаю, что Blackberry больше, чем Android).