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媒体查询不起作用

回答

相关问题