• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Mobile CSS-Version wird nicht aufgerufen

Status
Für weitere Antworten geschlossen.
G

GamesRun

Neues Mitglied
Hallo liebe HTML-Profis,
ich habe eine Frage zum Thema Responsive Webdesign. Für meine erste Webseite habe ich eine extra CSS-Datei für Mobilgeräte angelegt. Diese habe ich folgendermaßen im head verlinkt:
HTML: 
<head>
    <meta charset="utf-8">
    ...
    <link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px)" href="mobile.css">
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


</head>
Eigentlich sollte ja jetzt für Mobilgeräte die mobile.css aufgerufen werden - dies ist aber nicht der Fall. Stattdessen wird das Originallayout angezeigt, mit dem Unterschied, dass einige Objekte etwas größer dargestellt werden als auf dem Computer.
Woran kanns liegen?
Danke,
GamesRun
 
Werbung:
Ein komischer Weg seine media queries einzubinden... Hab ich vorher noch nicht gesehen!
Geht das überhaupt... (eventuell ist das ja der Fehler).

Mein Tipp:
HTML: 
<head>
    <meta charset="utf-8">
    ...
    <link rel="stylesheet" type="text/css" href="mobile.css">
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
</head>

die mobile.css sieht dann so aus:

Code: 
@media only screen
and (max-width: 480px) and (min-width: 0) {
    ... dein CSS-Code
}
Denk dran, das du auch mehrere media queries machen kannst:
Code: 
@media only screen
and (max-width: 480px) and (min-width: 0) {
    ... dein CSS-Code
}

@media only screen
and (max-width: 180px) and (min-width: 0) {
    ... dein CSS-Code der ab 180px gilt
}

Wichtig noch zu sagen:
Es muss kein komplett neues CSS geschrieben werden, sondern lediglich die zu ändernden CSS-Attribute der Klasse:
Code: 
.test {
   position: relative;
   top: 30px;
   bottom: 50px;
}

@media only screen
and (max-width: 480px) and (min-width: 0) {
    //Ab 480px soll NUR bottom auf 30px gesetzt werden:
    .test {
        bottom: 30px;
    }
}
 
Danke für eure beiden Antworten. Ich habe beide Tipps befolgt, was mich letztendlich zum Erfolg geführt hat.
Kann geschlossen werden.
 
Werbung:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben