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

Question

这是一个比我在这里面临的特定问题更抽象的问题......我有一个我设计的网页并且我已经做出了一些响应，但我想知道是否有一种方法来包装一个 div 元素(s) 在视口变化时自动保持内容纵横比的元素内部。

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

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

标签： cssresponsive-design

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 screen 属性根据视口更改某些值。