CSS3 媒體查詢不起作用

問題描述

我在以下網站上使用 CSS 媒體查詢：

[刪除的網站連結]

在 styles.css 中，都使用以下變體：

/*--[ Normal CSS styles ]----------------------------------*/

@media only screen and (max-width: 767px) {

/*--[ Mobile styles go here]-------------------------------*/
}

當我縮小視窗時，這些網站會在普通瀏覽器 (Safari，Firefox) 中調整為我想要的佈局，但移動佈局在手機上根本不顯示。

相反，我只看到預設的 css 。

任何人都可以指向正確的方向嗎？我一直線上上檢視教程和模板來實現這些查詢，但是我覺得我缺少一些基本的東西，以使其工作…

最佳解決方案

所有這三個都是有用的提示，但看起來我需要新增一個元標記：

<meta name="viewport" content="width=device-width" />

現在它似乎在 Android(2.2) 和 iPhone 都正常工作…

次佳解決方案

不要忘記在媒體查詢之上擁有標準的 css 宣告，否則查詢也將不起作用。

.edcar_letter{
    font-size:180px;
}

@media screen and (max-width: 350px) {
    .edcar_letter{
        font-size:120px;
    }
}

第三種解決方案

我懷疑關鍵字 only 可能是這裡的問題。我沒有使用這樣的媒體查詢問題：

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

第四種方案

我在新聞網站使用引導，但它不適用於 IE8，我使用 css3-mediaqueries.js javascript 但仍然不工作。如果您希望媒體查詢使用此 javascript 檔案新增螢幕到您的媒體查詢行在 css

這裡是一個例子：

<meta name="viewport" content="width=device-width" />


<style>
     @media screen and (max-width:900px) {}
     @media screen and (min-width:900px) and (max-width:1200px) {}
     @media screen and (min-width:1200px) {}
</style>

<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<script type="text/javascript" src="css3-mediaqueries.js"></script>

css 連結線簡單如上。

第五種方案

今天我有類似的情況。媒體查詢無效。過了一會兒，我發現’and’ 之後的空間不見了。適當的媒體查詢應如下所示：

@media screen and (max-width: 1024px) {}

參考文獻

• CSS3 media queries not working

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。