我在引導媒體查詢有誤，請指導我正確的代碼

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

我想身體的背景顏色變爲紅色使用@media screen size 0px to 380px。但背景顏色從0px更改爲280px。我經歷了代碼中的所有事情，但我沒有注意到如何糾正它。請解釋我發生了什麼問題？我在引導媒體查詢有誤，請指導我正確的代碼

來源

2017-09-14 Sachin Singh

您必須放大屏幕。嘗試ctrl + 0.它可以工作讓我知道如果它不適合你 –

沒有必要添加'（min-width：0px）'你只能在這裏使用最大寬度'@media唯一屏幕和（max-寬度：380px）{}' – kravisingh

下面是測試片段表明，一切工作正常。嘗試登錄窗口寬度像下面來看看它的真實大小

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

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

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

<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>

來源

2017-09-14 11:58:11

你好，請嘗試以下之一，

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

，並請評論，如果它的工作與否。

來源

2017-09-14 12:25:53 naveen

我在引導媒體查詢有誤，請指導我正確的代碼

回答

相關問題