Разное количество контента в адаптиве

131

11 января 2021, 17:20

Вопрос заключается в следующем.

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

Получается при загрузке стр узнаем ширину окна (допустим 320 = моб), делаем ajax запрос, получаем json данные и выводим 2 карточки. Отслеживаем изменение окна если она становиться больше 1024 все удаляем, делаем ajax запрос и выводим уже 3 карточки товара.

Так ли это делается? И делается ли вообще так?

Answer 1

Обычно это делается так:

Загружаете 3 карточки товара и при помощи медиа запроса в CSS определяете, показывать 2 или 3 карточки.

Смотрите как можно показывать и скрывать карточку на чистом CSS:

.card-list { 
  display: flex; 
} 
 
.card { 
  flex: 1; 
  border: 1px solid Red; 
  margin: 0 15px; 
} 
 
@media screen and (max-width: 480px) { 
  .xs-hidden { 
    display: none; 
  } 
}

<div class="card-list"> 
  <div class="card">Первая карточка</div> 
  <div class="card">Вторая карточка</div> 
  <div class="card xs-hidden">Третья карточка</div> 
</div>

Вся соль в классе xs-hidden. Его можно присвоить любому тэгу и этот тэг будет автоматически прятаться на экранах шириной меньше или равной 480px. Обратите внимание, 480px принят за "стандартный" размер экрана мобильного. Ну как "принят". Многие авторы договорились считать мобильным всё что меньше или равно 480px. Со временем эта цифра увеличится.

Старайтесь по возможности обходиться без определения ширины экрана в JS. Сэкономите нервы себе и пользователям.