CSS3媒體查詢不起作用

我最近一直在爲網站開發移動版本，並且很簡單地希望能夠在瀏覽器被檢測到位於移動設備上時更改CSS文件。您可以查看我之前的嘗試here，但我現在已經決定完成此操作的最可行方法是關注媒體查詢。CSS3媒體查詢不起作用

我在這裏的問題是，媒體查詢根本不起作用。它總是加載默認樣式表。這裏是我的代碼：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 
<link href="../css/style.css" id="stylesheet" rel="stylesheet" type="text/css" /> 
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="../css/style_mob.css" />

我是否錯過了這段代碼？我嘗試過使用爲此提供的許多教程，但似乎沒有人幫助我。我真的在這裏遇到了死衚衕，所以任何幫助都會受到大力讚賞。

來源

2011-04-11 Liam Spencer

默認樣式表沒有任何會阻止它加載的屬性。

你可以給它media="screen and (min-width: 481px)"，但這會導致危險，舊的瀏覽器也不會加載它。

通常最好是讓默認樣式表加載並確保移動樣式表覆蓋默認樣式表中不需要的任何東西。

來源

2011-04-11 09:23:47 RoToRa

感謝您的回答。這當然有幫助。問題在於，默認的CSS文件非常大，因此我必須通過每種樣式並基本覆蓋它以將其去掉。移動樣式表沒有很多樣式元素，因此我決定從頭開始創建一個。我想，如果我不得不將所有事情都交給那些只需要做的事情！ – 2011-04-11 09:33:12

您可以使用默認樣式表的媒體查詢測試舊瀏覽器。大多數會加載它，因爲它開始於「屏幕」。如果您發現某個不加載它的特定瀏覽器，但您必須支持，則可能會有其他選擇。 – RoToRa 2011-04-11 09:45:56

感謝您的幫助，我似乎接近工作解決方案。我有一個查詢，但。我不得不使用一些CSS條件來確保樣式表使用IE瀏覽器加載。這引出了一個問題，就是這個頁面會如何渲染，比如舊版Firefox不支持CSS3。 – 2011-04-11 10:51:48

完成條件與min-device-width在iOS上工作。注意單詞設備。但是，即使沒有字設備，它也能在android上正常工作。

來源

2012-07-23 14:30:21 Moriz

我在一個新聞網站使用引導，但它不能在IE8上工作，我用css3-mediaqueries.js JavaScript，但仍然無法正常工作。如果你希望你的媒體查詢與此javascript文件工作在CSS

在此處添加的畫面投放到媒體查詢行是一個示例：

<meta name="viewport" content="width=device-width" /> 
<script type="text/javascript" src="css3-mediaqueries.js"></script> 

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

CSS鏈接線那麼簡單，以上線。

來源

2013-08-31 10:12:31 user1290329

如果您有initial-scale=1.0和maximum-scale=1.0，那麼user-scalable=0也有點多餘。將最大比例設置爲等於初始縮放比例意味着用戶無法放大，因爲它們是以最大縮放比例開始的。

來源

2014-02-18 14:12:50 TylerH

CSS3媒體查詢不起作用

回答

相關問題