css+媒体查询多个并列
时间: 2023-11-18 21:03:34 浏览: 92
mq-scss:极其强大的Sass媒体查询mixin。 允许您创建几乎可以想象的任何媒体查询
以下是使用CSS和媒体查询实现多个并列的示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>CSS Media Query</title>
<style>
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.box {
width: 30%;
height: 100px;
margin-bottom: 20px;
background-color: #ccc;
}
@media screen and (max-width: 768px) {
.box {
width: 48%;
}
}
@media screen and (max-width: 480px) {
.box {
width: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
```
在上面的示例中,我们使用了CSS的flex布局来实现多个并列。我们使用了媒体查询来根据不同的屏幕尺寸设置不同的宽度。在屏幕宽度小于768px时,每个盒子的宽度为48%;在屏幕宽度小于480px时,每个盒子的宽度为100%。
阅读全文