Отображение разной верстки на разных разрешениях. Как правильно?

Question

[Артур]

Есть 3 макета одного лендинга под мобильный экран, под средний и десктопный.
Верстка по бутстрапу.

На мобильной верстке некоторые секции скрываются через hidden-xs, сразу возникает вопрос - картинки используемые в этой секции в мобильной версии прогрузятся пользователю или нет?

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

Answer 1

[fasnet]

1. Класс hidden-xs это display: none. В свою очередь, display: none -

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

Следовательно пользователю изображения не прогрузятся.
2-3. Тут как душе угодно. НО!!! Ни есть хорошо, когда существует две вёрстки с одинаковым контентом. Я бы со стилями повозился. Да, это займёт больше времени, но зато и профит получишь, и код чище станет, и к карме +100 будет))

Comments

[Артур]

Протестировал работу display block.
Как я понял сначала грузится index.html полностью, вместе со всеми картинками.
Затем грузится css и применяет display block, картинка удаляется, но запрос к ней был и пользователь ее получил хоть и не видит на странцие.
Во вкладке network запрос за картинкой есть :(

[fasnet]

Почитайте про критический css https://medium.com/web-standards/critical-and-prog...

Answer 2

[Максим Тимофеев]

boostrap решает все эти вопросы, но загромождает код, и тут вопрос сколько таких скрытых блоков, если это 1 - 2 блока - то в чем проблема?
Можно еще сделать динамическую подргузку части блоков, после загрузки страницы в js получать размеры дисплея и слеать ajax, который вернет блок именно для этого размера, пока идет ajax можно какой-то лоадер вставить вместо блока
Ну и если шаблоны совершенно разные, то можно на сервере определять устройство и под разные устройства генерить разные шаблоны. Нет гарантии, что устройство верно определиться, но иногда это единственный вариант.
Еще вариант - делать прелоадер и пока он там красуется, делать ajax и получать нужный контент. Различия версий можно разрулить через поддомены.

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