CSS-将div包裹在响应元素中？

Question

这比我在这里面临的特定问题更抽象...我已经设计了一个网页，并且使其中一些网页具有响应性，但是我想知道的是是否有一种包装方法元素内的div元素，当视口更改时，该元素将自动保持内容的宽高比。

例如，假设我有一个100px宽的div。然后，在它周围包裹一些元素，当视口更改为以前大小的一半时，我的原始div现在将调整为50px。

这存在吗？如果不是，为什么？

Answer 1

我认为您的意思是每当视口大小减半时，都会调整特定css元素的媒体查询，

例如，我希望在我的视口宽度小于或等于600像素时立即更改字体大小

@media screen and (min-width: 600px) {
.mobilefont {
    font-size: 7vw;}
}
@media screen and (max-width: 600px) {
.mobilefont {
    font-size: 13vw;}
} 

您可以使用@media屏幕属性根据视口更改某些值。

Answer 2

对于这种响应，您必须使用百分比

例如

div {
 width: 100%;
}