加载移动样式表时如何取消初始样式表？答案

【问题标题】：How to cancel initial stylesheet when a mobile stylesheet is loaded?加载移动样式表时如何取消初始样式表？
【发布时间】：2013-07-25 21:54:51
【问题描述】：

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

【问题讨论】：

标签： html css

【解决方案1】：

您不能取消样式表本身，但您可以通过覆盖其 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。

【讨论】：

【解决方案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 answer，再研究一下MozDevNetwork

【讨论】：