@import стили, не работающие в медиа-запросе

Я пытаюсь импортировать стиль, основанный на медиа-запросе, но импорт не запускается. Если я помещаю стили непосредственно в медиа-запрос, они отображаются на странице.

Вот ссылка на живой сайт http://update.techbasics.ca

Вот мой стиль .css с медиа-запросами и импортом

Я использую wordpress, если это помогает отлаживать.

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

Stylesheet: Main Stylesheet

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

Ответ 1

попробуйте этот код

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

Ответ 2

Вы использовали вот так?

Вы можете написать:

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

Вы можете добавить путь, используя @import

или как:

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

Ответ 3

Вот решение:

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

Ответ 4

Он отлично работает, попробуйте изменить размер окна, и вы увидите изменение цвета Как я вижу в своем главном окне на моем экране (1920x1080) правило CSS

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

В стиле style.css первая строка 37-38 срабатывает, поэтому вы не можете видеть оранжевый цвет. Попробуйте упорядочить правила css

Ответ 5

У меня была такая же проблема, и после поиска, не найдя хорошего решения, я в конечном итоге переместил медиа-запросы на импортированный 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;
   }
}

Ответ 6

MDN заявляет, что @import не может быть вложенным и должен иметь до все другие объявления, кроме @charset.

Синтаксис выглядит следующим образом:

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

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