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

我一直在尝试创建一个电影网格，就像

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

如果有人能抽出一些时间来帮助我实现这一目标，并告诉我正确的方法，相信我，我们将不胜感激

我已经尝试过使用css网格（我很确定这是我需要的方式），但是我不能让我的头绕过响应面

---

谢谢。

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

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

您可以通过以下方式实现此级别的响应：

• Flexbox或CSS网格并使用其属性
• 媒体查询，看起来像

  @仅媒体屏幕和…

• 使用电影卡上的

  宽度
  和
  高度
  尺寸的百分比或其他可缩放单位

• 使用

  min-width

  和

  min-height

  防止电影卡变小
  • 或者，您也可以使用

    max width

    和

    max height

    执行相反的操作

---

我包含了一个片段，演示了如何使用Flexbox实现站点响应的粗略实现

const createMovieCard=color=>{
const div=document.createElement（'div'）
div.classList.add（‘电影卡’）
div.style.background=颜色
div.innerHTML='示例电影'
返回分区
}
const container=document.querySelector（“.container”）
常量颜色=[“红色”、“蓝色”、“黄色”、“绿色”、“橙色”]
对于（设i=0；i<50；++i）{
const color=colors[i%colors.length]
container.appendChild（createMovieCard（彩色））
}

.container{
宽度：100%；
文本对齐：居中；
/*通过将此div的显示设置为flex，
我可以访问Flexbox的属性。
我现在可以使用这些属性来操作
这个部门的孩子们*/
显示器：flex；
/*这将使这个部门的孩子们在左边居中*/
对正内容：左；
/*flex wrap的作用很像代码编辑器的软包装特性*/
柔性包装：包装；
}
.电影卡{
边缘：1米；
背景：浅灰色；
/*其父级具有“display:flex”的子级也可以访问Flexbox
财产*/
弹性：0；
/*通过将宽度设置为百分比并具有“最小宽度”属性，可以
打开视口时，使电影卡具有更大的宽度
更大，并防止视口关闭时它们变得太小
较小，例如在移动视口上*/
宽度：15%；
最小宽度：100px；
高度：150像素；
}

---

您好……欢迎来到堆栈溢出。您的问题太广泛，无法回答。浏览google stuff在线提供的教程。如果您有任何错误，请将其张贴在此处并进行检查