So laden verschiedene css-Datei je nach Fensterbreite: kleinere Größe nicht erkannt

Ich laden soll eine andere css-Datei, wenn die Größe des Fensters unter 500 Pixel. Ich habe

<link type="text/css" media='(max-width: 500px)' rel="stylesheet" href="/static/mobile.css" />
<link type="text/css" media='(min-width: 500px)' rel='stylesheet' href='/static/main.css' />

Aber die wichtigsten.css überschreibt immer die mobile.css trotz der Fenster, die weniger als 500 Pixel. Was ist falsch?

BEARBEITEN:
Ich geändert es zu

<link type="text/css" rel="stylesheet" href="/static/main.css" />
<link type="text/css" media="(max-width: 500px)" rel="stylesheet" href="/static/mobile.css" />

Aber wenn ich die verkleinern das Fenster auf weniger als 500 Pixel, die element-Inspektor zeigt, dass die mobile.css wird geladen, aber jedes element wird überschrieben durch die Spezifikationen von main.css.

InformationsquelleAutor mango | 2014-04-14
  1. 10

    CSS steht für CASCADING STYLE SHEETS das heißt, Sie sollten immer Ihre main stylesheet an der top und dann Sekundär Stylesheets darunter. Je mehr bestimmte Sie möchten, verwenden Sie den CSS in eine Datei über die andere der weiter unten/nach die anderen CSS-Dateien, die es sein sollte.

    <link href="themes/default/primary.css" rel="stylesheet" type="text/css" />
<link href="themes/default/secondary.css" rel="stylesheet" type="text/css" />
<link href="themes/default/tertiary.css" rel="stylesheet" type="text/css" />

    Wenn Regeln in der sekundären übereinstimmung, die Regeln in der Grundschule, weil dann die sekundären.css-Datei Kaskaden nach das primäre.css dann Vorrang. Das gleiche mit dem Tertiär.css-Datei und die Regeln, Vorrang vor den Regeln der sekundären.css-Datei.

    Jetzt bewerben Ihr problem...

    Nehmen alle die Haupt-CSS-Dateien und dann fügen Sie das Bildschirm-spezifische CSS-Dateien...

    <head>
<link href="themes/default/primary.css" rel="stylesheet" type="text/css" />
<link href="themes/default/secondary.css" rel="stylesheet" type="text/css" />
<link href="themes/default/tertiary.css" rel="stylesheet" type="text/css" />
<link href="/static/mobile.css" media="(max-width: 500px)" rel="stylesheet"  type="text/css" />
<link href="/static/main.css" media="(min-width: 500px)" rel="stylesheet" type="text/css" />
 </head>

    Auch versuchen, halten Sie Ihre HTML-Attribute alphabetisch, wenn Sie vorher weit genug, finden Sie kleine Leckerbissen wie, sparen Sie eine Menge ärger und halten Sie doppelte Anführungszeichen für die Attribute eines Elements.

    Dass der Kurs beantwortet die Frage aber, was Sie wirklich tun sollte, ist die Minimierung der HTTP-requests wenn Sie gehen, um eine HTTP-Anforderung für eine CSS-Datei ist. Unabhängig innerhalb der CSS selbst ist, wo Sie sollten die Verwendung von media queries.

    main {margin: 4%;}
section {border-width: 10px;}
@media (max-width: 1024px)
{
 main {margin: 4px;}
 section {border-width: 2px;}
}

    Immer testen Sie Ihren code auf den höchsten Auflösungen ersten; ich Ignoriere die "mobile-first" - Mentalität hat einen guten Grund: ich verstehen wie CSS ist soll zu geschrieben. Ihre Medien-Anfragen sollte werden nach unten anpassen, denn die tablet-und (Mobil -) Telefon-Ansichten von der gleichen website. Betrachten Sie den folgenden code:

    CSS

    div {border: #000 solid 2px; float: left; width: 96px;}

    HTML

    <section>
<div>Example</div>
<div>Example</div>
<div>Example</div>
<div>Example</div>
<div>Example</div>
<div>Example</div>
<div>Example</div>
<div>Example</div>
<div>Example</div>
<div>Example</div>
</section>

    ...wie Sie die Größe Ihres browser die div-Elemente in diesem Beispiel starten Sie einfach nach unten gedrückt, in die zweite Zeile und Sie Größenänderung Ihr browser-Fenster kleiner zu sein. Ein tablet-und mobile Geräte sind nur wirklich reduziert-Fenster-Größen. Ich hoch empfehlen die Verwendung des Größe tool auf Chris Pederick ist die Web-Developer-Toolbar.

    So laden verschiedene css-Datei je nach Fensterbreite: kleinere Größe nicht erkannt

    • (siehe edit) die wichtigsten.css-Datei ist für alles, was mit einem min-Breite von 500 Pixel, und alles andere sollte sich auf mobile.css
    • Ich wiederhole-Elemente, obwohl ich definieren .myclass im main.css-und .myclass wieder in mobile.css. Macht das ein Unterschied?
    • Wenn die gleiche Regel definiert ist in der Grundschule.css-und Sekundarstufe.css dann die sekundären.css-Regeln werden stattdessen verwendet, wenn Sie Verschieden sind (z.B. wenn width ist das gleiche ändert sich nichts, aber wenn du eine andere height im sekundären.css wird es stattdessen verwenden.
    InformationsquelleAutor John
Schreibe einen Kommentar