@media失效 -问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

@media失效

杨冬芳 2016-06-08 16:26:58 2165

screenshot
我在完成这个题目的时候遇到了一个问题。

当我把@media内容放在css头部的时候,某些属性生效,但还有些不行。

当我把@media放在css尾部的时候,属性都生效了。

这是为什么?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
    <div class="container">
        <div class="h120"></div>
        <div class="h100"></div>
        <div class="h40"></div>
        <div class="h200"></div>
    </div>
</body>
</html>

css

.container {
    display: flex;
    height: 500px;
    border: 1px solid #999;
    align-items: center;
    justify-content: space-between;
}

.container div {
    width: 150px;
    border: 1px solid #f00;
}

.container div:last-child {
    border: 1px solid #0f0;
    height: 200px;
}

.h120 {
    height: 120px;
}

.h100 {
    height: 100px;
}

.h40 {
    height: 40px;
}

@media (max-width: 640px) {
    .container {
        flex-wrap: wrap;
        align-items: flex-start;
    }
    .h200 {
        border: 1px solid #f00;
        order: -1;
    }
}
前端开发 容器
分享到
取消 提交回答
全部回答(1)
  • 杨冬芳
    2019-07-17 19:32:15

    首先,当media放尾部时,并没有完全生效,.h200的边框颜色并没有生效。
    这个问题在于CSS选择器优先级。具体规则就不讲了,请搜索CSS选择器优先级。
    当@media放前面,@media里的样式生效时

    .container {
            flex-wrap: wrap;
            align-items: flex-start;
        }

    此代码选择器的优先级与

    .container {
        display: flex;
        height: 500px;
        border: 1px solid #999;
        align-items: center;
        justify-content: space-between;
    }

    的优先级一样,放后面的有效,所以你的media里的代码无效。
    而在div.h200中,@media里的样式选择器.h200比.container div:last-child优先级低,所以无论@meida放前面还是后面都是无效的

    0 0
云原生
使用钉钉扫一扫加入圈子
+ 订阅

云原生时代,是开发者最好的时代

推荐文章
相似问题