Как создать адаптивную сетку (сайт фильма) - PullRequest
Новая
       6

Как создать адаптивную сетку (сайт фильма)

0 голосов
/ 29 июня 2019

Я пытался создать сетку фильмов, точно так же, как http://www0.yesmovies.net/

Это мой первый проект, использующий адаптивный дизайн (а не простое использование minmax), и он мешает мне двигаться вперед.

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

Я пытался использовать css grid (я почти уверен, что мне нужно идти по этому пути), но я не могу разобраться с адаптивной стороной.

Thankyou.

1 Ответ

0 голосов
/ 29 июня 2019

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

  • Видеокарты уменьшаются по мере того, как я изменяю размер моего окна просмотра с большего на меньшее.
  • При определенном наборе размеров карточки с фильмами имеют размер от 8 карточек меньшего размера в ряду до 6 карточек чуть большего размера.
  • По мере того, как я продолжаю сокращаться, сайт продолжает изменять размеры карточек фильмов и менять количество карточек в ряду.

1011 *
*

Вы можете достичь этого уровня реагирования, используя:

  • либо Flexbox или CSS Grid и использование их свойств
  • медиазапрос , который выглядит как @media only screen and...
  • с использованием процентов или других масштабируемых единиц для ваших width и height размеров на ваших видеокартах
  • с использованием min-width и min-height, чтобы ваши видеокарты не становились слишком маленькими
    • альтернативно, вы также можете использовать max-width и max-height, чтобы сделать обратное

Я включил фрагмент, который демонстрирует примерную реализацию того, как Flexbox может использоваться для достижения отзывчивости для вашего сайта. 

const createMovieCard = color => {
  const div = document.createElement('div')
  div.classList.add('movie__card')
  div.style.background = color
  div.innerHTML = 'Example movie'
  return div
}

const container = document.querySelector('.container')

const colors = ['red', 'blue', 'yellow', 'green', 'orange']

for (let i = 0; i < 50; ++i) {
  const color = colors[i % colors.length]
  container.appendChild(createMovieCard(color))
}
.container {
  width: 100%;
  text-align: center;
  
  /* By setting this div's display to flex, 
     I get access to Flexbox's properties. 
     I can now use these properties to manipulate
     the children of this div. */
  display: flex;
  
  /* This is will center this div's children to the left. */
  justify-content: left;
  
  /* flex-wrap acts much like a code editor's soft wrapping feature. */
  flex-wrap: wrap;
}

.movie__card {
  margin: 1em;
  background: lightgrey;
  
  /* Children whose parent has `display: flex` also gain access to Flexbox 
     properties. */
  flex: 0;
  
  /* By setting width as a percentage and having a min-width property, you 
     enable your movie cards to have a larger width when the viewport is 
     larger and prevent them from getting too small when the viewport 
     is smaller, such as on a mobile viewport. */
  width: 15%;
  min-width: 100px;
  
  height: 150px;
}
<div class="container"><!-- The movie cards are generated here using JS. --></div>
...