通過媒體查詢

實時更新屏幕，我期待的是，當我像屏幕尺寸的變化編碼下面通過媒體查詢

@media (min-width: 1200px) { 
    .container { 
    max-width: 1170px; 
    } 
} 

@media (min-width: 900px) { 
    .container { 
    max-width: 870px; 
    } 
} 

@media (min-width: 600px) { 
    .container { 
    max-width: 570px; 
    } 
}

我的網站會改變，但它不工作。我縮小了瀏覽器大小，仔細查看了開發人員工具的屏幕大小變化。當屏幕尺寸達到中斷點時，我認爲屏幕會根據媒體查詢進行更新。

它只在加載文檔時有效。

我該怎麼做才能做到實時？我應該使用一些腳本？

來源

2014-10-17 hina10531

問題是規則。當瀏覽器達到1200px時，它符合所有3條規則。 http://jsfiddle.net/jonms83/5q6etqex/

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 
<style> 
.container {background-color:black;} 
@media all and (min-width: 1200px) { 
    .container { 
    max-width: 1170px; 
    } 
} 
@media all and (max-width: 1199px) and (min-width: 601px){ 
    .container { 
    max-width: 870px; 
    } 
} 

@media all and (max-width: 600px) { 
    .container { 
    max-width: 570px; 
    } 
} 
</style> 
</head> 

<body> 
<div class="container">&nbsp;</div> 
</body> 
</html>

來源

2014-10-17 15:55:43 user1174141

嘗試在媒體規格交換最小寬度最大寬度：

@media (max-width: 1200px) { 
    .container { 
    max-width: 1170px; 
    } 
} 

@media (max-width: 900px) { 
    .container { 
    max-width: 870px; 
    } 
} 

@media (max-width: 600px) { 
    .container { 
    max-width: 570px; 
    } 
}

我做了一個JS-小提琴證明：http://jsfiddle.net/mnva4kg4/

我在某些背景色中添加，以顯示它的的確根據媒體查詢交換定義。當然，您必須調整顯示區域的大小才能看到它。你的HTML和.container的其他樣式將影響它看起來不同的尺寸。

來源

2014-10-17 15:46:23

通過媒體查詢

回答

相關問題