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

尝试那种代码

@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

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

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

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

Answer 6

我有同样的问题，在搜索后没有找到一个好的解决方案，我最终将媒体查询移动到导入的css。事实上，即使它们没有被应用，也会下载所有样式表（参见CSS media queries）。

那么拥有单独的文件有什么意义呢？对我来说，它保持井井有条。使用您的示例：

@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;
   }
}

Answer 7

真实陈述

@import ('filename.css') mediaType and (feature: value);

示例：

@import (responsive.css) screen and (min-width: 320px) and (max-width: 480px);

注意：如果对CSS文件使用@import，则此文件不应附加在<link>标记中。否则不能使用样式。

Answer 8

就我而言，我应该首先在我的 html 中添加这个元标记

 <meta content="width=device-width, initial-scale=1" name="viewport" />

@import样式不适用于媒体查询

8 个答案: