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，但我认为到目前为止我做事的方式已经使自己陷入困境。

Answer 1

如果要将媒体查询用于更具体的选项别忘了添加：

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

您必须至少分割几行代码基本的“停止样式”和简单的“移动样式”。

以台式机为例：

@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

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

1 个答案: