23

我正在尝试根据媒体查询导入样式，但不会触发导入如果我将样式直接放在媒体查询中，它们将呈现到页面。

这是指向实时站点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;
  }
4

8 回答 8

24

试试那种代码

@import url("/inc/Styles/full.css") (min-width: 940px);
于 2013-09-05T12:13:48.017 回答
11

这是解决方案：

/* Everything 700px and lower */
@import url("./700.css") only screen and (max-width: 700px);
于 2016-01-16T11:58:22.577 回答
10

你是这样用的吗？

你可以写：

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

您可以在使用时添加路径@import

或喜欢：

@import url(style.css) (screen and min-width:600px);
于 2013-07-15T08:48:12.357 回答
3

MDN 声明@import不能嵌套，必须在除@charset.

语法如下：

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

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

于 2016-09-01T03:19:00.703 回答
0

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

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

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

于 2013-02-18T21:20:26.547 回答
0

我遇到了同样的问题，在没有找到好的解决方案进行搜索之后，我最终将媒体查询移到了导入的 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;
   }
}
于 2013-03-21T15:33:49.997 回答
0

真实的陈述

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

例子：

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

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

于 2020-07-24T11:04:52.017 回答
0

在我的情况下，我应该首先在我的 html 中添加这个元标记

 <meta content="width=device-width, initial-scale=1" name="viewport" />
于 2021-03-25T23:40:18.010 回答