Frage @ Import-Stile funktionieren nicht in einer Medienabfrage


Ich versuche, einen Stil basierend auf einer Medienabfrage zu importieren, aber der Import wird nicht ausgelöst. Wenn ich Stile direkt in die Medienabfrage lege, werden sie auf der Seite gerendert.

Hier ist ein Link zur Live-Site http://update.techbasics.ca

Hier ist meine style.css mit den Medienabfragen und den Importen

Ich benutze Wordpress, wenn das hilft, zu debuggen.

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

und hier ist min600.css (im selben Verzeichnis wie die style.css Datei)

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

14
2018-02-18 19:17


Ursprung


Antworten:


versuchen Sie diese Art von Code

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

16
2017-09-05 12:13



Hast du so benutzt?

Du kannst schreiben:

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

Sie können den Pfad bei der Verwendung hinzufügen @import

oder wie:

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


3
2017-07-15 08:48



Hier ist die Lösung:

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

3
2018-01-16 11:58



Es funktioniert gut, versuchen Sie, die Größe Ihres Fensters zu ändern, und Sie werden sehen, wie sich die Farben ändern Wie ich in meinem Hauptfenster auf meinem Bildschirm (1920x1080) die CSS-Regel sehen kann

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

Befindet sich in style.css, Zeile 37-38 zuerst, deshalb können Sie die orange Farbe nicht sehen. Versuchen Sie, Ihre CSS-Regeln neu zu ordnen


0
2018-02-18 21:20



Ich hatte das selbe Problem und nachdem ich gesucht hatte, ohne eine gute Lösung zu finden, habe ich die Medienabfragen stattdessen auf das importierte CSS verschoben. Und tatsächlich werden alle Stylesheets heruntergeladen, auch wenn sie sowieso nicht angewendet werden (siehe CSS-Medienabfragen).

Was ist dann der Grund, getrennte Dateien zu haben? Für mich hält es die Dinge organisiert. Anhand Ihres Beispiels:

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

Dann auf der min600.css:

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

0
2018-03-21 15:33



MDN sagt das @import kann nicht verschachtelt werden und muss kommen Vor alle anderen Erklärungen außer @charset.

Die Syntax lautet wie folgt:

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

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


0
2017-09-01 03:19