Почему не используется резиновая верстка с медиа запросами?



@neeby001

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


Решения вопроса 0


Ответы на вопрос 2



@tereh

Сложно отвечать, когда нет критики по существу.
Из того, что я знаю:
— адаптивная вёрстка вынуждает отрисовывать тяжёлый HTML-код страницы на слабом мобильном устройстве;
— CSS-правила переписываются по несколько раз, что тормозит отрисовку страницы на экране;
— выполняются тяжёлые JS-скрипты, которые часто не нужны на мобильном;
— могут вставляться большие фотографии на маленьком экране;
— могут загружаться неиспользуемые шрифты, CSS, JS
— сложно совместить в одном HTML навороченный интерфейс для мобильного с ещё более навороченным для компьютера (речь о CRM, маркетплейсах и т.п.)

Большинство минусов адаптивной вёрстки можно избежать, если делать правильно. Но мало тех, кто умеет делать правильно. Ведь считается, что вёрстка — это работа для тех программистов, кто не смог выучить более продвинутый язык.

И ещё пример в финале:
Мой старый девятилетний сайт с отдельной версией для мобильных до сих пор получает больше 80 баллов в Google PageSpeed. В то же время адаптивные сайты коллег скатились до 20-50 баллов из-за ужесточения требований. Для увеличения баллов в адаптивных сайтах им нужно проделать столько работы, что проще сделать вёрстку с нуля.



@pacificregmi

Fluid layout is a design approach in which the layout of a webpage adjusts and responds to the size of the viewport, or the area in which the webpage is being displayed. This can be achieved using techniques such as responsive design and flexible grids.

Media queries are a feature of CSS that allow you to apply different styles based on the characteristics of the device or viewport. For example, you can use media queries to apply different styles for different screen sizes or orientations.

While fluid layout and media queries can be used together to create a responsive design, fluid layout alone is not typically used with media queries. Instead, fluid layout is often used in conjunction with responsive design techniques such as flexible grids and flexible images to create a layout that adjusts to the size of the viewport.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *