如何创建响应式网格（电影网站）答案

【问题标题】：How to create a responsive grid (movie website)如何创建响应式网格（电影网站）
【发布时间】：2019-06-29 13:42:19
【问题描述】：

我一直在尝试创建一个电影网格，就像http://www0.yesmovies.net/

这是我第一个使用响应式设计（而不是简单的 minmax 用法）的项目，它阻止了我前进。

如果有人可以花一些时间帮助我实现这一目标并告诉我正确的方法，相信我将不胜感激。

我尝试过使用 css 网格（我很确定这是我需要走的路），但我无法理解响应式方面。

谢谢。

【问题讨论】：

嗨......欢迎来到堆栈溢出......你的问题太宽泛了，无法回答。浏览可用的在线谷歌资料教程。如果您遇到任何错误，请在此处发布并浏览此how-to-ask

标签： html css css-grid

【解决方案1】：

我认为您可以通过调整浏览器的宽度/高度来调整网站的视口，并确定电影网格的响应方式。我给了你一些我注意到的事情的起点：

当我将视口从大变小时，电影卡片会变小。
在特定尺寸下，电影卡片从每行 8 张较小的卡片变为 6 张稍大的卡片。
随着我不断缩小，该网站继续调整电影卡片的大小并更改每行卡片的数量。

您可以通过以下方式实现这种响应水平：

Flexbox 或 CSS Grid 并使用它们的属性
媒体查询，类似于@media only screen and...
为电影卡上的width 和height 尺寸使用百分比 或其他可缩放单位
使用min-width 和min-height 防止您的电影卡变得太小
- 或者，您也可以使用max-width 和max-height 来做相反的事情

我包含了一个 sn-p，它演示了如何使用 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;
}

&lt;div class="container"&gt;&lt;!-- The movie cards are generated here using JS. --&gt;&lt;/div&gt;

【讨论】：