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

如果您希望卡片具有最小宽度和最大宽度，也可以使用“拉伸”，您可以使用百分比宽度和最小宽度。最大宽度。让我们说你想让卡最小200px和最大300px然后写它。剩下的就是你给卡的百分比价值的魔力。希望这能回答你的问题。

Answer 2

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

开始学习如何使这些内容响应的好地方在以下链接：https://www.w3schools.com/css/css_rwd_intro.asp

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

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

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

在此处详细了解视口：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

使产品卡响应

2 个答案: