0 
<link rel="stylesheet" type="text/css" href="index.css" />
<link rel="stylesheet" href="handheld.css" type="text/css" media='screen and (max-device-width: 480px)'/>

我的 html 文档顶部有这两行。第一个是我的典型样式表，第二个样式表是我在浏览器检测到移动设备时加载的移动样式表。两个样式表都加载在彼此之上。是否有可能否定加载index.css时的效果？handheld.css

4

2 回答 2

5

您不能取消样式表本身，但您可以通过覆盖其 CSS 规则来否定前一个样式表的效果。

您还可以使用第三个样式表或应用媒体查询规则来制作一些仅适用于非移动设备的 CSS。喜欢：

<link rel="stylesheet" type="text/css" href="index.css" />
<link rel="stylesheet" href="desktop.css" type="text/css" media='screen and (min-device-width: 481px)'/>
<link rel="stylesheet" href="handheld.css" type="text/css" media='screen and (max-device-width: 480px)'/>

请注意，这些方法需要支持 CSS3 最小/最大媒体查询。如果您需要支持无法做到这一点的浏览器（IE6/IE7/IE8），请使用像 Respond（https://github.com/scottjehl/Respond）这样的 polyfill。

于 2013-07-24T19:03:41.720 回答
2

使用媒体查询，您将无法“取消”但“停止”使用它。

像这样的东西：

<link href="base.css" rel="stylesheet"/>

/* this next will be only used when **screen** AND min-width big screen */
<link href="desktop.css"
    media="only screen and (min-width: 801px)" rel="stylesheet"/>

/* this next will be only used when it's a tablet */
<link href="tablet.css"
    media="only screen and (min-width: 629px) and (max-width: 800px) and
    (orientation:portrait),
    only screen and (min-height:629px) and (max-height:800px) and
    (orientation:landscape)" rel="stylesheet"/>

/* this next will be used only when but .. you figured it out */
<link href="desktop.css"
    media="only screen and (min-width: 801px),
    not only screen and (min-height:629px) and (max-height:800px) and
    (orientation:landscape)" rel="stylesheet"/>

您可以查看这个SO 答案 并通过MozDevNetwork研究一下

于 2013-07-25T13:49:27.913 回答