Question

@media only screen and (min-width: 0px) and (max-width: 380px){
    body{
        background: red;
    }
}

我正在尝试使用@media screen size 0px to 380px将正文背景颜色更改为红色。但背景颜色从0px变为280px。我已经完成了代码中的所有内容，但我没有注意到如何纠正它。请解释一下我的错误是什么？

Answer 1

以下是测试片段，证明一切正常。尝试记录下面的窗口宽度以查看其实际大小

＆＃13;

$(window).resize(function(){
$('#current_width').html($(window).width())
})

＆＃13;

@media only screen and (min-width: 0px) and (max-width: 380px){
    body{
        background: red;
    }
}

@media only screen and (min-width: 380px){
    body{
        background: blue;
    }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
Hi there!
<div id='current_width'></div>
</body>

＆＃13;

Answer 2

嗨，请尝试这些，

@media only screen and (max-width : 380px) {
body { background-color:red; }
}

并发表评论是否有效。

我在Bootstrap媒体查询中遇到错误请引导我通过正确的代码

2 个答案: