CSS媒體查詢不適用

Question

我在我的主要css樣式表中使用此媒體查詢，它似乎沒有工作。

@media only screen and (max-device-width : 768px) {
    .small { display: block; }
    .big { display: none !important;}
}

在Web檢查器中，它甚至不會顯示為規則，但是當我查看源面板時，查詢顯然存在。 所以我不確定問題是什么。 我正在嘗試定位寬度小於768px的設備。

這是我如何鏈接到樣式表，如果這很重要<link rel="stylesheet" media="screen" type="text/css" href="{site_url}interface/style.css" />

Answer 1

當您使用max-device-width它不會影響Web瀏覽器，您應該檢查移動瀏覽器以查看其是否正常工作。

或者，如果要檢查Web瀏覽器，則只使用max-width 。

請參閱工作演示

CSS

@media only screen and (max-width : 768px) {
    .small { display: block; }
    .big { display: none;}
}