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

Question

第一个问题：

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

第二个问题：

我还有一个方形 100x100pxdiv 使用包含赞成/反对按钮的position: absolute放置在响应式图像上。不幸的是，当我缩小图像时，div 保持不变，如果图像缩小了很多，很快就会接管整个图像。我认为我不能在这里使用 % 作为div 宽度和高度，因为div 父级不是正方形，所以如果我说width: 10%;，height: 10%，div 将不是正方形。

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

Answer 1

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

例：

.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>

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

一个好的起点在这里 媒体查询

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;
}
}

第二个问题：

为什么不使用最大宽度和像素宽度和百分比宽度？ 元素不会太大，并且会响应迅速