@import 样式在媒体查询中不起作用 [英] @import styles not working in a media query

问题描述

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

I am trying to import a style based off a media query but the import is not being triggered If i put styles directly in the media query they are rendered to the page.

这里是实时网站的链接 http://update.techbasics.ca

Here is a link to the live site http://update.techbasics.ca

这是我的带有媒体查询和导入的 style.css

Here is my style.css with the media queries and the imports

如果这有助于调试，我正在使用 wordpress.

I am using wordpress if that helps debug.

@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 文件位于同一目录中)

and here is min600.css (located in the same directory as the style.css file)

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

推荐答案

试试那种代码

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

这篇关于@import 样式在媒体查询中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！