Каким способом скрывать элементы?

Question

[Ива]

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

Comments

[Андрей Федоров]

Строго говоря - это клоакинг (ботам подсовывается одно содержимое, пользователям - другое). Можно схватить санкции от поисковых систем.

[Ива]

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

Answer 1

[Артём Щурин]

frontender.com.ua/media-queries

Answer 2

[ivgenij7]

к примеру
/*до 660px не показывать элемент*/
media (max-width: 660px){
.класс_элемента_который_нужно_скрыть {
display: none;
}
}

Comments

[Ива]

В таком случеи да элемент будет скрыт, но браузер при использовании display:none; все равно загружает элемент, но просто его не отображает, а мне надо добиться чтобы он не просто скрывал, а так же если использую медиа запрос не загружал его на том разрешении которое я указал в медиа запросе

[ivgenij7]

Ива: тогда вам нужна отдельная версия сайта и редирект на эту версию
к примеру всем кто с экраном до 640px вы хотите показывать мобильную/урезанную версия на которая расположена на lite.site.local
тогда вот такой тег используйте

Answer 3

[Андрей Федоров]

Вы неверно вопрос сформулировали - загрузка элементов и их сокрытие/перемещение - это разные вещи. Если нужно только скрыть/переместить - вам правильно говорят - медиа-запросы.

Перемещать можно по разному:
1. дать блокам display: inline-block - на больших разрешениях блоки будут в строчку, на малых - в столбик.
2. flex-box. с помощью order можно указать порядок следования блоков и поменять его в зависимости от разрешения.

Скрыть блок, но оставить под него место - visibility: hidden, скрыть блок и не выделять под него место display: none

Answer 4

[Валера Удав]

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

Если говорить конкретно про скрытие, то медиа запросы и display: none; о чем выше уже писали.