Question

第一个问题：

我使用position: absolute在响应图像上放置了一些文本，但是我没有设置任何字体大小，因此它使用默认的16px。当我按比例缩小屏幕时，图像会按比例缩小，但文本保持不变，这会导致文本在图像上占据大量空间

第二个问题：

我还使用position: absolute在响应图像上放置了一个100x100px的正方形div，其中包含upvote / downvote按钮。不幸的是，当我再次按比例缩小图像时，div保持不变，并且如果按比例缩小图像，很快就会接管整个图像。我认为这里不能使用％作为div的宽度和高度，因为div的父级不是正方形，所以如果我说width: 10%;，height: 10%，则div不会是正方形。 / p>

所以我的问题是，我应该尝试用％，em，vh，vw等完全替换像素值吗？

Answer 1

我想您的问题的答案是肯定的。用像素设置位置或字体大小不如％或您列出的其他字体灵活，但是％width迄今为止最灵活。

示例：

.percent {
  width: 50%;
}

.pixel {
  width: 50px;
}

<div class="percent">
  I have a 50% width ......................................................................................
</div>
<hr />
<div class="pixel">
  I have a 30px width
</div>

点击整页链接后，您会看到50％的宽度发生变化

Answer 2

好的，我认为我不太了解您的问题，但是如果您真的需要响应式图像。

然后您可以将div设置为特定大小，然后允许图像填充div，这样您将获得响应图像。

例如

<style>
  .div:width:700px;
  .img:width:100%;
</style>

使其具有响应能力的另一种方法是使用媒体查询在不同的屏幕尺寸上应用不同的样式规则

这里是一个不错的起点Media queries

Answer 3

第一个问题：

使用字体大小没有问题。您可以使用字体大小根据html的字体大小缩放元素

示例：

html {
   font-size: 16px;
}

并使用 rem

设置所有元素的样式

.element {
// this means your element will have 4 * your font size, 64px
width: 4rem;
}

在断点上，您可以更改html的字体大小，使所有rem大小的元素都可以更新其大小

@media only screen and (max-width: 768px) {
html {
    font-size: 14px;
  }
}

第二个问题：

为什么不将max-width与像素结合使用，将width与百分比结合使用？元素不会太大并且会响应

创建响应式网站时，我应尽量避免使用像素作为文本大小和div？

3 个答案: