CSS3媒体查询不工作 [英] CSS3 media query not working

问题描述

我在我的网站上使用了以下媒体查询。

I am using the following media queries on my website.

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

我的意图是为不同的设备提供不同的样式表。

My intention here was to have different stylesheets for different devices. (For now I want to support only desktops and ipads).

但是当我使用Firefox（版本8）或Chrome（版本：15.0）在我的桌面上加载网站时， 874.106）它下载了两个CSS文件（web.css和ipad.css）。

But when I load the website on my desktop using Firefox (Version 8) or Chrome (Ver: 15.0.874.106) it downloads both the CSS files (both web.css and ipad.css).

我不太确定我的代码是什么错了。有人可以帮我解决这个问题。 c> 桌面，您必须拥有这项功能。

I am not too sure what is the wrong with my code. Can someone help me with this.

推荐答案

请写 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)" />

这篇关于CSS3媒体查询不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！