Les styles @import ne fonctionnent pas dans une requête multimédia

Je suis en train d'importer un style basé sur une requête des médias, mais l'importation n'est pas déclenché Si j'ai mis les styles directement dans la requête de média qu'ils sont affichés à la page.

Voici un lien vers le site en direct http://update.techbasics.ca

Ici, c'est mon style.css avec les médias, les requêtes et les importations

Je suis en utilisant wordpress si cela peut vous aider à déboguer.

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

et voici min600.css (situé dans le même répertoire que le style.fichier css)

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

source d'informationauteur Cool Guy Yo

  1. 16

    essayer ce genre de code

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

    Avez-vous l'utilisation de ce genre?

    Vous pouvez écrire:

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

    Vous pouvez ajouter un chemin d'accès que vous utilisez @import

    ou comme:

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

  3. 3

    Voici la solution:

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

    Il fonctionne très bien, essayez de redimensionner votre fenêtre et vous verrez les couleurs changement de
    Comme je peux le voir dans ma fenêtre principale, sur mon écran (1920 x 1080) à la règle CSS

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

    Située dans le style.css , ligne 37-38 tire en premier, c'est pourquoi vous ne pouvez pas voir la couleur orange.
    Essayez de ré organiser vos règles css

  5. 0

    J'ai eu le même problème et après avoir cherché sans trouver une bonne solution, j'ai fini par déménager le des requêtes de média à l'importés css à la place. Et de fait, toutes les feuilles de style sont téléchargées, même si elles ne sont pas appliquées de toute façon (voir CSS media queries).

    Alors à quoi sert d'avoir des fichiers séparés? Pour moi, il garde les choses organisées. À l'aide de votre exemple:

    @import url(min480.css); /* min-width: 480px */
@import url(min600.css); /* min-width: 600px */

    Puis sur le min600.css:

    /* min600.css */
@media only screen and (min-width: 600px) {
   header {
      text-align: left; 
   }
   body {
      background: green;
   }
}
  6. 0

    MDN états qui @import ne peuvent pas être imbriqués et doit venir avant toutes les autres déclarations à l'exception @charset.

    La syntaxe est comme suit:

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

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