CSS媒體查詢無法正常工作

我不明白爲什麼此媒體查詢無法正常工作。CSS媒體查詢無法正常工作

我想申請一些代碼，如果屏幕寬度是480px。在這種情況下，我正在使用：

@media screen and (width: 480px) { 
}

但沒有任何反應。我想工作與周圍

@media screen and (max-width: 481px) and (min-width: 479px) {

仍然沒有工作它僅適用於@media screen and (max-width: 481px)但如何是另一端？

來源

2017-04-20 Klapsius

你在媒體css查詢中放什麼？ – Option

用於小屏幕移動設備的一些css代碼 – Klapsius

它與'@media屏幕和（max-width：480px）'一起使用'但是可以使用少於480'但我不需要它。我只需要'480' – Klapsius

剛剛嘗試這一點，你在你的規則中指定的屏幕，如果你試圖用另一個訪問它不起作用：

編輯：段有填充和利潤，因此，測試與507px或在嘗試對我的小提琴480像素：http://jsfiddle.net/46u4kggq/1

不要嘗試用鉻響應的工具，因爲有上即可

body{ 
 
    background: black; 
 
} 
 

 
@media (width: 480px){ 
 
    body{ 
 
    background: yellow; 
 
    } 
 
}

<body> 
 
</body>

無視口

來源

2017-04-20 11:20:51

你意識到這是行不通的？ – Option

這是工作，當寬度正好是480px時，背景是黃色的 –

在提交它之前，您是否真的嘗試了這個？ – Option

嘗試使用jQuery爲此，在CSS媒體查詢中，您無法定位精確寬度，只能使用最大寬度和最小寬度。

$(document).ready(function(){ 
function checkWidth() 
{ 
    var windowSize = $(window).width(); 
    if (windowSize == 480) 
    { 
     console.log("screen width is equal t0 480"); 
    } 
} // Execute on load checkWidth(); // Bind event listener 
$(window).resize(checkWidth);

}）;

來源

2017-04-20 11:31:08

函數checkWidth（）{var_windowsSize = $（window）.width（）; if（windowSize == 480）console.log（「screen width is equal t0 480」）; } } //執行加載 checkWidth（）; //綁定事件監聽器 $（window）.resize（checkWidth）; }）; –

在$（document）.ready（function（）{}）中試試這段代碼; –

將代碼添加到您的答案中，而不是在評論部分。 – Option

CSS媒體查詢無法正常工作

回答

相關問題