Question

我尝试将@mesia CSS样式表包含在内：

@import url("rwd.css");

我将它放在主CSS样式表代码的末尾，但它的工作方式完全不同。以这种方式导入时，任何其他样式表都可以正常工作，但不包含@media。

有没有办法在不添加其他标签的情况下导入CSS样式表

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

HTML中的

？有我的片段：

#menu {
  background-color: #eee;
}

h1 {
  font-size: 50px;
  text-align: center;
}

#mobile-menu-button {
  display:none;
}

@import url('rwd.css');

/* @media (max-width:700px) {
  
  h1 {
    font-size: 16px; // that works
  }
  #menu {
    display: none; // that works too!
  }
  #mobile-menu-button {
    display: block; // that does not ps. removing float either
  }
  
} */

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="main-style-sheet.css" rel="stylesheet">
</head>
<body>

<div id="mobile-menu-button">show menu</div>
<div id="menu">Menu buttons</div>

<h1>Title</h1>

</body>
</html>

Answer 1

你错误地认定了这个问题。

来自mdn：

@import CSS at-rule用于从其他样式表导入样式规则。 这些规则必须先于所有其他类型的规则，但@charset规则除外;因为它不是嵌套语句，所以@import不能在条件组at-rules中使用。

媒体查询与此失败无关。它不起作用，因为您将@import放在样式表的末尾而不是开头。

当我构造一个测试用例时，直到我将@import移动到CSS文件的顶部之前，才从服务器请求了rwd.css。在那一点上一切正常（虽然顺序的改变意味着一些规则被main-style-sheet.css中的后续样式所覆盖）。

Answer 2

除了昆汀写得很好的答案

一个简单的解决方法是首先请求您的媒体查询文件，并在其顶部添加主样式表的@import

仅在<head>

中使用此功能

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

在文件

中这样

@import url('main.css');

@media (max-width:700px) {
  h1 {
    font-size: 16px;
  }
  /* and so on  */
}

CSS @import不适用于@media样式表

2 个答案: