Question

<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的影响？

Answer 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 min / max媒体查询。如果您需要支持无法执行此操作的浏览器（IE6 / IE7 / IE8），请使用像Respond（https://github.com/scottjehl/Respond）这样的polyfill。

Answer 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

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

2 个答案: