@import样式不能在媒体查询工作(@import styles not working in a

我试图导入基于掀起了媒体查询的风格，但进口没有被触发，如果我把风格直接在渲染页面的媒体查询。

下面是对活动网站的链接http://update.techbasics.ca

这是我的style.css与媒体查询和进口

我使用WordPress的，是否可以帮助调试。

@import url('base.css');
/******************************************************************
Site Name: Tech Basics
Author: Anders Kitson

Stylesheet: Main Stylesheet

Here's where the magic happens. Here, you'll see we are calling in
the separate media queries. The base mobile goes outside any query
and is called at the beginning, after that we call the rest
of the styles inside media queries.
******************************************************************/
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

/*****************************************************************
BASE CSS
*****************************************************************/

/*****************************************************************
MEDIA QUERIES
*****************************************************************/
@media only screen and (min-width: 480px) {
    @import url('min480.css');
  }
@media only screen and (min-width: 600px) {
     @import url('min600.css');
  }
 @media only screen and (min-width: 768px) {
  body {
    background: purple; } }
@media only screen and (min-width: 992px) {
  body {
    background: orange; } }
@media only screen and (min-width: 1382px) {
  body {
    background: url("../img/noisy_grid.png"); } }
/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
  @import url('base.css'); 
}

这里是min600.css（位于同一目录style.css文件）

header {
  text-align: left; }
  body{
    background: green;
  }

Answer 1:

尝试那种代码

@import url("/inc/Styles/full.css") (min-width: 940px);

Answer 2:

这里是解决方案：

/* Everything 700px and lower */
@import url("./700.css") only screen and (max-width: 700px);

Answer 3:

你使用这样？

你可以写：

@import url('path.css') (screen and min/max-width: 600px);

当您使用您可以添加路径@import

或类似：

@import url(style.css) (screen and min-width:600px);

Answer 4:

MDN指出@import不能嵌套，必须跟所有的除外其他声明之前 @charset 。

语法如下：

@import url;
@import url list-of-media-queries;

https://developer.mozilla.org/en-US/docs/Web/CSS/@import

Answer 5:

它工作正常，尝试调整你的窗口，你会看到的颜色改变，因为我可以在我的主窗口中看到我的屏幕（1920×1080）的CSS规则上

body {
background: url("../img/noisy_grid.png");
}

位于style.css中，行头37-38火灾，这就是为什么你不能看到橙色。 尝试重新安排你的CSS规则

Answer 6:

我有同样的问题，并没有找到一个很好的解决方案进行搜索后，我结束了移动媒体查询导入CSS代替。 而事实上所有的样式表被下载，即使他们无论如何也适用（见CSS媒体查询 ）。

那么什么是具有分割文件的点？ 对我来说，它保持组织的事情。 使用您的示例：

@import url(min480.css); /* min-width: 480px */
@import url(min600.css); /* min-width: 600px */

然后在min600.css：

/* min600.css */
@media only screen and (min-width: 600px) {
   header {
      text-align: left; 
   }
   body {
      background: green;
   }
}

文章来源: @import styles not working in a media query