@import样式无法在媒体查询中使用

Question

我试图导入基于媒体查询的样式,但导入未被触发如果我将样式直接放在媒体查询中,它们将呈现给页面.

这是现场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

try that kind of code

@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

它工作正常，尝试调整窗口大小，您会看到颜色发生变化正如我在屏幕上的主窗口（1920x1080）中看到的CSS规则

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

位于 style.css 中，第 37-38 行首先触发，这就是为什么您看不到橙色的原因。尝试重新安排你的CSS规则