html - 如何使我的图像网格响应/调整大小和设置断点

Question

我正在尝试制作包含图像、文本叠加层和链接的网格(如果我能弄清楚如何将它放置在我想要的位置，每个部分还有一个按钮)。

我的主要问题是试图让它响应。我拼凑了一些 CSS，但不确定如何让这些部分在断点之后在彼此下面运行。

任何帮助将不胜感激。我还认为我的 CSS 需要大量的工作，但目前它在视觉上看起来不错。

谢谢

CSS

* { box-sizing: border-box; }
.jk-main-categories {
	max-width: 800px;
  margin: 0 auto;
}

.jk-main-categories > div {
  padding: 0 20px;
  color: #fff;
}
.jk-main-categories {
  display: grid;
  grid-template-columns: repeat(3, 1 fr);
  grid-auto-rows: minmax(100px, auto);

}

.jk-weddings {
  grid-column: 1 / 4;
  grid-row: 1 / 7;
  background-image: url("http://www.jacquelinekennedy.co.uk/wp-content/uploads/2017/10/jacqueline-kennedy-banner11.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
	max-width: 100%;
	min-width: 500px;
	margin:5px;
}


.jk-party-planning {
  grid-column: 4 / 7;
  grid-row: 1 / 4;
  background-image: url("http://www.jacquelinekennedy.co.uk/wp-content/uploads/2017/10/jacqueline-kennedy-banner6.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
	min-width: 300px;
  max-width: 100%;
	margin: 5px;
}

.jk-corporate-events {
  grid-column: 4 / 7;
  grid-row: 4 / 7;
  background-image: url("http://www.jacquelinekennedy.co.uk/wp-content/uploads/2017/10/jacqueline-kennedy-banner15.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
	min-width: 300px;
	max-width: 100%;
	margin: 5px;
}

a#jacqueline-kennedy-luxury-weddings > h2 {
  color: white;
	line-height: 1.1em;
	text-shadow: 1px 1px 1px rgba(51,51,51, 0.5)
}

a#jacqueline-kennedy-luxury-party-planning > h3 {
  color: white;
	line-height: 1.1em;
text-shadow: 1px 1px 1px rgba(51,51,51, 0.5)
}

a#jacqueline-kennedy-corporate-event-planning > h3 {
  color: white;
	line-height: 1.1em;
	text-shadow: 1px 1px 1px rgba(51,51,51, 0.6)
}

div.jk-weddings > p {
	max-width: 400px;
	min-width: 300px;
	line-height: 1.3em;
}

<div class="jk-main-categories">
  <div class="jk-weddings"><a href="http://www.jacquelinekennedy.co.uk/appointments" id="jacqueline-kennedy-luxury-weddings"><h2>Plan<br>Your<br>Perfect<br>Day</h2></a><p>Have the wedding of your dreams professionally planned and managed making sure your special day goes the way you planned.</p></div>
  <div class="jk-party-planning"><a href="http://www.jacquelinekennedy.co.uk/appointments" id="jacqueline-kennedy-luxury-party-planning"><h3>Luxury<br>Party<br>Planning</h3></a></div>
  <div class="jk-corporate-events"><a href="http://www.jacquelinekennedy.co.uk/appointments" id="jacqueline-kennedy-corporate-event-planning"><h3>Corporate<br>Events</h3></a></div>
</div>

我猜我需要某种媒体 CSS，但我想我已经把自己逼到了一个 Angular 落，因为我到目前为止做事的方式。

Answer 1

如果你想对更具体的选项使用媒体查询不要忘记添加这个:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

您至少需要拆分几行代码基本的“destop 风格”和简单的“mobile 风格”。

以桌面为例:

@media screen and (min-width: 1024px) {
// specific for desktops 
.jk-weddings {
 grid-column: 1 / 4;
 grid-row: 1 / 7;
 background-image: url("http://www.jacquelinekennedy.co.uk/wp-content/uploads/2017/10/jacqueline-kennedy-banner11.jpg");
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
 max-width: 100%;
 min-width: 500px;
 margin:5px;
}
}

作为移动设备的一个非常快速和肮脏的例子:

@media screen and (max-width: 1023px) {
.jk-weddings {
 grid-column: 1 / 4;
 grid-row: 1 / 7;
 background-image: url("http://www.jacquelinekennedy.co.uk/wp-content/uploads/2017/10/jacqueline-kennedy-banner11.jpg");
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
 max-width: 100%;
 margin:5px;
}
}

如果你看看这个简单的例子，我所做的一切正在删除最小宽度。

所有被赋予“最小宽度”的类都应该是为您要支持的每个设备声明。

这种方式不是使用媒体查询的最佳方式，它们可用于构建复杂的响应式设计。

关于媒体查询以及如何使用它们的更多信息可以是在这里找到:

https://developer.mozilla.org/de/docs/Web/CSS/Media_Queries/Using_media_queries https://www.w3schools.com/css/css_rwd_mediaqueries.asp