使用CSS根据屏幕大小更改宽度和高度

我有一个div包含一些项目

根据屏幕大小，如何更改这些元素的宽度和高度

例如，对于

minwidth:576px

I，在同一行上需要两个正方形

<style>
    @media (min-width: 576px) {  
        a.el {
            width: 50%;
            height: 50%;
        }
    }
    @media (min-width: 768px) {  
        a.el {
            width: 25%;
            height: 25%;
        }
    }
    @media (min-width: 992px) {  
        a.el {
            width: 10%;
            height: 10%;
        }
    }
</style>


<div>
    <a href="" class="el">Link</a>
    <a href="" class="el">Link</a>
    <a href="" class="el">Link</a>
    <a href="" class="el">Link</a>
</div>

@介质（最小宽度：576px）{
a、 埃尔{
宽度：50%；
身高：50%；
}
}
@介质（最小宽度：768px）{
a、 埃尔{
宽度：25%；
身高：25%；
}
}
@介质（最小宽度：992px）{
a、 埃尔{
宽度：10%；
身高：10%；
}
}

您需要将

a

设置为

显示：块或
显示：内联块
以使它们具有
宽度
和
高度
，但除非父元素具有高度，否则高度百分比将不起作用

您可以使用
display:flex（flexbox）对齐一行上的所有
.el
和
柔性包裹：包裹
允许它们在需要时进行包装（
宽度：50%；
当有两个以上的项目时）

由于屏幕越大，尺寸越小，因此不清楚使用
height
属性想要实现什么，但是如果将高度定义为
.parent
，例如：
.parent{height:100vh；}
您将看到
.el
将具有
高度


/*用于宽度调整中包含的边框和填充*/
* {
框大小：边框框；
}
/*如果你想让你的.el在*/
.家长{
显示器：flex；
柔性包装：包装；
}
a、 埃尔{
边框：1px实心；
} 
@介质（最小宽度：576px）{
a、 埃尔{
宽度：50%；
身高：50%；
}
}
@介质（最小宽度：768px）{
a、 埃尔{
宽度：25%；
身高：25%；
}
}
@介质（最小宽度：992px）{
a、 埃尔{
宽度：10%；
身高：10%；
}
}
您可以在媒体查询中使用flex来实现这一点


*{
保证金：0；
填充：0；
}
@介质（最小宽度：576px）{
#容器{
宽度：100vw；
显示器：flex；
证明内容：周围的空间；
柔性流：行换行；
对齐项目：拉伸；
}
a、 埃尔{
显示器：flex；
证明内容：中心；
弹性：45%；
边框：1px纯黑；
}
}
@介质（最小宽度：768px）{
#容器{
宽度：100vw；
显示器：flex；
证明内容：周围的空间；
柔性流：行换行；
对齐项目：拉伸；
}
a、 埃尔{
显示器：flex；
证明内容：中心；
弹性：45%；
边框：1px纯黑；
}
}
@介质（最小宽度：992px）{
#容器{
宽度：100vw；
显示器：flex；
证明内容：周围的空间；
柔性流：行换行；
对齐项目：拉伸；
}
a、 埃尔{
显示器：flex；
证明内容：中心；
弹性：20%；
边框：1px纯黑；
}
}
您需要将
a
设置为
display:block或
显示：内联块
以使其具有
宽度
和
高度
。