Html 创建响应性网站时，我是否应该避免使用像素作为文本大小和div？

第一个问题：

我使用

position:absolute

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

第二个问题：

我还有一个方形的100x100px div，它使用

position:absolute

定位在响应图像上，其中包含向上投票/向下投票按钮。不幸的是，当我再次缩小图像时，div保持不变，如果图像被缩小很多，div很快就会接管整个图像。我不认为我可以在这里使用%作为div宽度和高度，因为div父对象不是正方形，所以如果我说

width:10%，
高度：10%
，div将不是正方形

所以我的问题是，我是否应该尝试将像素值完全替换为%，em，vh，vw等？
我想你的问题的答案是肯定的。使用像素设置位置或字体大小不如%或您列出的其他设置灵活，但%宽度是迄今为止最灵活的设置

例如：

html {
   font-size: 16px;
}


。百分比{
宽度：50%；
}
.像素{
宽度：50px；
}

我有50%的宽度。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

我有一个30像素的宽度
第一个问题：

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

例如：

html {
   font-size: 16px;
}

并使用rem设置所有元素的样式

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

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

第二个问题：

为什么不使用像素的最大宽度和百分比的宽度？元素不会太大，而且会有响应性
好的，我不认为我完全理解你的问题，但是如果你真的需要一个响应性强的图像

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

例如


.div：宽度：700px；
.img：宽度：100%；

另一种使其响应的方法是使用媒体查询在不同的屏幕大小上应用不同的样式规则

这里是一个很好的起点
宽度应该以相对单位来完成-不要太高，通常你会把它们作为自动单位。至于文本大小，您应该尝试使用相对单位，但仅从可访问性的角度来看，对于您的问题，只需添加一个媒体查询，您可以尝试使用vw之类的字体大小，但我发现它从来都不是您想要的大小，所以我只为主断点设置样式，以便文本在设备上始终保持相同大小（也就是说，你没有根据视口获得所有类型的字体大小），所以你会在某些断点处创建媒体查询，并为你使用的每个等添加规则？不，如果需要，我会更改网站的基本字体大小（我很少这样做）-如果你使用的是em或rem之类的东西，这会扩散到其他元素，但这只是我的观点。通常我们的网站设计的文本大小不会改变-没有人因为屏幕空间小而想阅读小文本，我们只是简化了设计，以便在手机上以更好的方式显示文本。是的，makes sense。这也是我担心的，如果我使用相对单位，移动设备上的文本会太小。1/你应该使用
rem
单位表示字体大小（这里比em和%更简单），而不是px表示可访问性（允许更多用户自定义和缩放文本）.2/您可以在CSS中使用正方形：-因为垂直填充与…宽度有关（是的）。如果可以避免，也不要使用绝对定位！Flexbox、网格、对象匹配或背景大小：封面/包含也许吧？使用rem表示宽度是没有响应的-除非您仅对基本字体大小的更改做出响应，否则在将窗口从桌面调整到移动设备时，它不会起任何作用-除非您在其中有媒体查询更改基本字体大小。最好使用vw单位的百分比表示宽度
<style>
  .div:width:700px;
  .img:width:100%;
</style>