Question

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

这是我的第一个使用响应式设计（而不是简单的maxmax用法）的项目，这使我无法继续前进。

如果有人可以抽出一些时间来帮助我实现这一目标，并告诉我正确的解决方法，那么相信我将非常感激。

我尝试使用css网格（我很确定这是我需要采取的方式），但是我无法回避响应方。

谢谢。

Answer 1

我认为您可以通过调整浏览器的宽度/高度来确定网站视口的大小，并确定影片网格对响应的响应。我为您提供了一些我注意到的东西的起点：

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

您可以使用以下方法实现此级别的响应：

Flexbox 或 CSS网格并使用其属性
媒体查询，看起来像@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>

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

1 个答案: