HTML鏈接中的媒體查詢未鏈接到單獨的CSS文件

當我使用媒體查詢從HTML鏈接鏈接到多個CSS文件時，僅應用完整大小的css文件。HTML鏈接中的媒體查詢未鏈接到單獨的CSS文件

我能夠得到媒體查詢使用一個單獨的CSS文件中成功地工作：

@media screen and (max-width: 700px) { 
body { 
    /* style changes */ 
}

不過，我想每個媒體查詢單獨的文件。這裏是我的測試代碼不爲我工作：

的index.html

<head> 
    <meta name='viewport' content='width=device-width, initial-scale=1' /> 
    <link rel='stylesheet' media='screen and (max-width: 700px)' href='mobile.css' /> 
    <link rel='stylesheet' href='stylesheet.css' /> 
</head> 

<body> 
</body>

mobile.css

body { 
    background-color:red; 
}

stylesheet.css中

body { 
    background-color:blue; 
}

所有文件正確命名並保存在同一個文件夾中。任何幫助將不勝感激！

來源

2014-12-06 user1486510

這是由於您鏈接CSS文件的順序所致。

您需要mobile.css類來覆蓋stylesheet.css中指定的類，所以將其包含在其中。

<link rel='stylesheet' href='stylesheet.css' /> 
<link rel='stylesheet' media='screen and (max-width: 700px)' href='mobile.css' />

來源

2014-12-06 00:39:23

HTML鏈接中的媒體查詢未鏈接到單獨的CSS文件

回答

相關問題