Отзывчивый и адаптивный дизайн: какой лучший выбор для дизайнеров?

Отзывчивый веб-дизайн стал термином, так как он был придуман Итаном Маркоттом в A List Apart в 2010 году; Концепция отзывчивого веб-сайта - один из самых больших «трюков» CSS в книгах и достаточно важный, чтобы напомнить себе, что делает «отзывчивый» сайт и как он отличается от «адаптивного».

Итак, в первую очередь, каковы основные различия между отзывчивым и адаптивным дизайн?

Проще говоря, отзывчивость является текучей и адаптируется к размеру экрана независимо от того, какое целевое устройство. Отзывчивое использование запросов CSS-СМИ для изменения стилей на основе целевого устройства, таких как тип отображения, ширина, высота и т. Д., И только один из них необходим для адаптации сайта к различным экранам.

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

320

480

760

960

1200

1600.

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

Последнее, в частности, вызвало много дискуссий за последние несколько лет, так как многие сайты поставляют полную модель рабочего стола, которая, даже если она не загружается на мобильное устройство, значительно замедляет работу сайтов. Чтобы обойти это, вы можете использовать медиа-запросы, но будет несколько компромиссов, так как отзывчивый сайт никогда не будет таким быстрым, как выделенный мобильный сайт.