css - 使产品卡片响应

Question

我需要使用百分比而不是像素制作一个 div 和其中的内容响应。

我发现使用百分比作为 div 的大小效果最好，然后我可以选择是使用 EM 还是 responsive queries 作为字体大小；我发现 quires 最适合这个。

section {
  width: 800px;
  height: 600px;
  background: #f5f5f5;
  padding: 50px;
}

.container {
  width: 30%;
  height: 50%;
  background: #fff;
  margin: auto;
  padding: 20px;
}

.background {
  background: #f5f5f5;
}

.text h1 {
  font-size: 24px;
  color: #000;
  font-family: 'open sans';
}

.text p {
  font-size: 16px;
  color: #000;
  font-family: 'open sans';
}

<section>
  <div class=" container">
    <span class="background "></span>
    <span class="gradient_bottom "></span>
    <div class="overlay ">
      <div class="text ">
        <h1>Title</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget dolor auctor, tempor nibh.</p>
      </div>
    </div>
  </div>
</section>

在代码中，您可以看到我为容器使用了一个百分比，但为该部分指定了像素，这样容器就知道是部分指定宽度的 80%。

然后我使用媒体查询来查找我需要它减少的文本点。您可以在下面看到一个示例。

@media only screen and (max-width: 500px) {
.text h1 {
    font-size: 18px;
}

Answer 1

因为您使用的是像素测量，所以显示的大小取决于查看内容的屏幕分辨率，而不是显示器的实际大小。为了使您的内容响应屏幕尺寸，您应该使用百分比或其他取决于可用空间量而不是像素量的 css 度量。

开始学习如何使此内容响应的好地方是此链接:https://www.w3schools.com/css/css_rwd_intro.asp

如果您只是询问如何包含百分比度量而不是像素度量，您可以使用 width: 50%;而不是 width: 100px;等等

此外，在使用响应式网页设计时，设置文档的视口(viewport)也很重要。您可以使用此代码段执行此操作:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

在此处阅读有关视口(viewport)的更多信息:https://www.w3schools.com/css/css_rwd_viewport.asp

您还可以在 CSS 中使用媒体查询来为特定屏幕尺寸定义特定 CSS 规则。这是一个 css 规则的例子，它设置所有元素的类 someclass宽度为 50%当屏幕尺寸小于 500px 时宽。

@media only screen and (max-width: 500px) {
 .someclass {
    width: 50%;
 }
}

媒体查询非常强大，可以真正帮助您优化您的网站，以在各种屏幕分辨率和尺寸下获得最佳外观。

一定要阅读这里的响应式网页设计指南，因为它不仅仅是在这里和那里使用百分比。 https://www.w3schools.com/css/css_rwd_intro.asp