CSS3媒體查詢不起作用

我在我的網站上使用以下媒體查詢。CSS3媒體查詢不起作用

<link rel="stylesheet" href="web.css" media="only screen and (min-device-width : 1025px)" /> 
<link rel="stylesheet" href="ipad.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px)" />

我的意圖是針對不同的設備有不同的樣式表。（現在我只想支持桌面和ipad）。

但是當我下載該網站使用的是Firefox（第8版）或Chrome（版本：15.0.874.106）我的桌面上下載這兩個CSS文件（包括web.css和ipad.css）。

我也不太清楚什麼是錯我的代碼。有人可以幫我弄這個嗎。

來源

2011-11-10 Sivakumar

可能無法正常工作，但嘗試改變值了一批：

<link rel="stylesheet" href="web.css" media="only screen and (min-device-width : 1024px)" /> 
<link rel="stylesheet" href="ipad.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1023px)"

來源

2011-11-10 11:51:15 Kyle

爲Desktop你寫min-width，而不是min-device-with這樣的：支持使用

<link rel="stylesheet" href="web.css" media="only screen and (min-width : 1025px)" /> 
<link rel="stylesheet" href="ipad.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px)" />

來源

2011-11-10 11:59:51 sandeep

這裏的問題是，在桌面上，它是下載這兩個css文件。我想它不應該在桌面上反覆下載ipad.css。我的假設錯了嗎？ – Sivakumar

它都下載CSS文件，因爲最小寬度是指頁面和最小設備寬度意味着它是積極的，當它在像iPhone和iPad – sandeep

設備開放閱讀這篇文章更多的HTTP屏幕尺寸：// CSS-技巧.COM/6206分辨率特定的樣式表/ – sandeep

瀏覽器的媒體查詢將下載所有的樣式表，而不管它需要顯示哪一個。

這些查詢會給你兩種不同的佈局處理基礎上的分辨率，而不是設備，而是兩個樣式總是會被下載。

media="screen and (min-width: 768px) and (max-width: 1024px)" 
media="screen and (min-width: 1025px)"

來源

2012-05-01 14:58:57 amigolargo

CSS3媒體查詢不起作用

回答

相關問題