容器查询是CSS中最受关注和要求的功能之一。可能大家接触过media query媒体查询，它可以根据不同设备的可视面积来设置css样式，那么容器查询到底是什么？
一、什么是容器查询
容器查询是可以帮助我们根据容器的内容（例如宽度和高度）来设置其内容样式的查询。这与媒体查询采用的方法不同，媒体查询可以帮助我们根据视口的更改来设置网页/网站的样式。二、flexbox实现容器查询
使用flexbox进行容器查询
Flexbox是一种单向布局模型，可让我们创建响应速度更快的网站。
在本文中，我们将使用一种基于flexbox的技术，以模仿容器查询。我们的目标是使用flexbox创建三列，并将它们全部移至具有特定容器宽度的行。代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<title>container queries</title>
<style>
.container {
display: flex;
flex-wrap: wrap;
gap: 1em;
}
.child {
flex-basis: calc( calc(500px - 100%) * 999);;
flex-grow: 1;
background: rgb(231, 227, 227);
padding: 1em;
font-size: 18px;
}
.child1 {
display: flex;
flex-wrap: wrap;
}
.child1 p {
flex-basis: calc( calc(400px - 100%) * 999);
flex-grow: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="child child1">
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ducimus, perferendis!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, soluta.
</p>
</div>
<div class="child child2">
Lorem ipsum Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laudantium aliquid esse fugiat!
</div>
<div class="child child3">
consectetur adipisicing elit. Tempora totam, eos rerum ipsum consequuntur suscipit?
</div>
</div>
</body>
</html>三、grid容器查询
我们将css进行修改如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BFW NEW PAGE</title>
<style>
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 1em;
}
.child {
background: rgb(231, 227, 227);
padding: 1em;
font-size: 18px;
}
</style>
</head>
<body>
<div class="container">
<div class="child child1">
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ducimus, perferendis!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, soluta.
</p>
</div>
<div class="child child2">
Lorem ipsum Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laudantium aliquid esse fugiat!
</div>
<div class="child child3">
consectetur adipisicing elit. Tempora totam, eos rerum ipsum consequuntur suscipit?
</div>
</div>
</body>
</html> 这就是基于容器的查询，不需要单独用@media，代码看上去也跟简洁。
{{collectdata}}
网友评论0