gpt4 book ai didi

html - 为什么我的媒体查询不起作用?

转载 作者:太空宇宙 更新时间:2023-11-03 21:21:51 24 4
gpt4 key购买 nike

我用 Moving from HTML Grid Systems to CSS Grid Systems 的代码制作了一个页面.但是我的页面无法正常工作,媒体查询似乎无法正常工作。他们为什么不工作? CSS lint 表示存在一些问题 CSS Lint

HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- <meta name="viewport" content="width=device-width"> -->
<title>Flex-training</title>
<link rel="stylesheet" href="main.css" />
</head>

<body>
<div class="l-flex">
<div id="back" class="l-fg3">
<div>Featured Item</div>
<div>Featured Item</div>
<div>Grid item</div>
<div>Grid item</div>
<div>Grid item</div>
</div>
</div>
</body>
</html>

CSS:

.l-fg3 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: -10px;
}

.l-fg3 > div {
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
@media screen and (min-width: 600px) {
margin: 10px;
-webkit-flex-basis: calc(33.333%-20px);
-ms-flex-preferred-size: calc(33.333%-20px);
flex-basis: calc(33.333%-20px);
}

> div:nth-child(1),
> div:nth-child(2) {
@media (min-width: 600px) {
flex-basis: calc(50% - 20px);
}
}
}

.l-flex {
overflow-x: hidden;
}


div {
border: 0.2px solid #506183;
border-radius: 5px;
background-color: #81f6a9;
}
#back {
background-color: #36a4c3
}

最佳答案

媒体查询包含选择器组,而不是相反。

您需要像这样修改您的 CSS:

.l-fg3 > div {
...
}

@media screen and (min-width: 600px) {
.l-fg3 > div {
...
}
}

关于html - 为什么我的媒体查询不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36502900/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com