如何在移動樣式表加載時取消初始樣式表？

<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的影響？如何在移動樣式表加載時取消初始樣式表？

來源

2013-07-24 Sam D20

您不能取消樣式表本身，但可以通過重寫其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）。

來源

2013-07-24 19:03:41 jsalonen

通過媒體查詢，您將無法'取消'，而是'停止'使用它。

是這樣的：

<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

來源

2013-07-25 13:49:27

如何在移動樣式表加載時取消初始樣式表？

回答

相關問題