Ответственные пиксели дизайна против процентов

Question

Я надеюсь, что кто-то может помочь.

Я недавно смотрел видео на отзывчивый веб-дизайн на хорошо известном сайте.

Я озадачен методом, принятым наставником. Он в основном создает три листа стилей (большой/средний/маленький), а в каждой таблице стилей он дает ширину PX DIVS и свопирует изображения там, где это необходимо.

Несомненно, этот метод является ошибочным, он может просто использовать проценты для жидкостного макета вместо разных листов стилей, вызванных медиа-запросами ??

Есть ли какие-либо преимущества для его метода?

большое спасибо,

Answer 1

Существует различие между гибкой конструкцией и адаптивным дизайном.

Согласно некоторым из книг, которые я прочитал, вы можете сделать макет гибким, используя значения% length , поэтому макет адаптируется к точным размерам ширины видового экрана.

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

Таким образом, гибкая конструкция может хорошо работать как отзывчивый дизайн, а отзывчивый дизайн может быть основан на макете с фиксированной шириной.

Излишне говорить, что подход, который вы используете, будет зависеть от дизайна, который вы пытаетесь создать и как он должен работать на разных устройствах.

Автор вашего учебника не обязательно ошибается, но их подход может быть не самым эффективным способом построения отзывчивого дизайна. В некоторых случаях, если вы используете значения %, вы можете достичь своего дизайна с гораздо более сжатой таблицей стилей CSS.

Answer 2

Вы можете использовать как макет жидкости, так и ответные запросы вместе - реагирующие запросы СМИ занимают место, где текучесть больше не управляется.

Например, содержимое в четырех столбцах с шириной столбцов в процентах уменьшит размер столбца для меньшей ширины экрана. Но наступает момент, когда столбцы настолько узкие, что они содержат только одно или два слова в строке, что выглядит неуклюжим, и его трудно читать, а содержимое переполняет его контейнеры. К тому времени, когда он дойдет до мобильных размеров, все слишком мало, чтобы читать вообще.

Чтобы решить эту проблему, вы можете писать медиа-запросы, чтобы переместить один или несколько столбцов в другом месте - запросы позволяют полностью переписать страницу, а не просто сжимать ее. И, в отличие от использования поплавков (часто используемых для изображений), где только конечный снижается по мере того, как все становится меньше, с медиа-запросами вы можете решить, какой из них является наиболее логичным div или столбцом, и где его переместить (или даже чтобы скрыть это полностью).

Также полезно избегать использования единиц PX повсюду, особенно для того, чтобы содержание текста на наших страницах было доступно для людей с недобросовестными действиями. Обратите внимание, что точка, где текст составляет только один или два слова на строку, намного раньше, при гораздо более широких ширинах столбцов, если пользователь работает с более высоким увеличением текста (как мне часто приходится делать).Я писал об этом недавно в своем блоге по адресу http://www.enigmaticweb.com/index.php/blog/accessibleResponsiveness, который вам может пригодиться. Ответ заключается в том, чтобы использовать единицы EM для контейнеров, содержащих текст, и для контрольных точек медиапотребителей (если вы только начинаете с медиа-запросов, то это полезно для начала использования этой привычки). Особо следует избегать разделов с фиксированной высотой и шириной - как только пользователь увеличит размер текста, все вырывается из div и деформирует другие вещи!

Кстати, как правило, это нехорошо делать то, что вы упомянули, и помещать ваши медиа-запросы в несколько таблиц стилей (он, вероятно, только пытался проиллюстрировать отдельный характер запросов) - это увеличивает время загрузки (отдельный HTTP-запрос доступ), что особенно плохая новость для мобильных телефонов.

Надеюсь, это поможет. В настоящее время огромное количество коммерческих сайтов становится отзывчивым, чтобы обслуживать мобильные телефоны. Так происходит мир.