Media Queries - Smartphone / alles andere

[Carrear]

Hi Leute,

ich bräucht grad mal einen Tipp, wie ich meine Media Queries formulieren kann, so dass ausnahmslos jedes Smartphone, egal ob landscape oder portrait ausrichtung eine stylesheet benutzt und alle anderen eine andere CSS.

Steh da grad ein bisschen auf dem Schlauch.

VG Martin

 

[tombe]

Schau mal ob dir die Beschreibung auf dieser Seite hier weiter hilft, da wird es recht gut beschrieben.

 

[Carrear]

Schau mal ob dir die Beschreibung auf dieser Seite hier weiter hilft, da wird es recht gut beschrieben.

Das funktioniert bei mir nicht Mobiltelefon im Landscape - Modus wird bei mir immer auf das screen.css geswitched.

	<link media="only screen and (min-device-width: 481px) and (min-width: 481px)" href="<we:url type="document" id="5" />" type="text/css" rel="stylesheet" />
	<link media="only screen and (max-device-width: 480px)" href="<we:url type="document" id="66" />" type="text/css" rel="stylesheet" />  
	<link media="only screen and (max-width: 480px)" href="<we:url type="document" id="66" />" type="text/css" rel="stylesheet" /> 
	<link media="only screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" href="<we:url type="document" id="66" />" type="text/css" rel="stylesheet" />

Habe das Samsung Galaxy S3

[EDIT 20.05.] Das wars? ^^ Scheinen ja nicht soo viele Leute Erfahrungen mit Media Queries zu haben Sobald ich die Lösung habe werde ich sie dann wohl mal posten

 

[Carrear]

Gibt es dazu keine Lösung****

 

[Jan-Frederik Stieler]

Hi,
warum so kompliziert, schnapp die ein Framework und hol dir da die Größen raus.

Grüße

 

[Gast170816]

Kann man diese Media Queries auch INS Stylesheet schreiben? Schon, oder?
Bei mir steht folgendes im Stylesheet...da dachte ich, wird der Container eben plötzlich 800px schmal, sobald ich den Browser klein schiebe, aber es passiert nix, er bleibt 1000px breit.

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
  .container, #latest_works, #bottom_content, #download {
    margin: auto;
    width: 500px;
  }
}

.container, #latest_works, #bottom_content, #download {
    margin: auto;
    width: 1000px;
}

 

[Jan-Frederik Stieler]

Hi,
das hatte ich garnicht gesehen gehabt, du hast das falsch gemacht mit der Größenangabe.
Die Media-Queries gehören in die CSS-Datei und werden nicht einzeln aufgerufen als wären es CSS-Dateien.

.class {
  …
}

@media (min-width: 768px) and (max-width: 979px) {
  .class {
    …
  }
}

@media (max-width: 767px) {
  .class {
    …
  }
}

…

Schreib deine MQ mal ans ende der CSS-Datei, also nach

.container, #latest_works, #bottom_content, #download {
    margin: auto;
    width: 1000px;
}

Viele Grüße

 

[Carrear]

Weißt du der Nachteil wenn du es IN das Stylesheet schreibst ist, dass du alle alten Regeln überschreiben und korrigieren musst. Bindest du alternative Stylesheets ein, werden nicht deklarierte Zuordnungen auch nicht interpretiert

 

[Jan-Frederik Stieler]

Hi,
@carrear: das was du schreibst ist etwas merkwürdig.
Wenn du Media-Queries verwendest dann werden nicht verwendete Klassen auch nicht interpretiert.
Was meinst du mit alle alten Regeln überschreiben und korrigieren. Klassen die definiert sind werden verwendet egal wo und wie sie, nach CSS-Regeln geschrieben sind.
Mehrere CSS-Dateien erhöhen so nebenbei auch die HTTP-Requests und verlangsamen das laden der Seite.

Grüße

 

[Carrear]

Hi,
@carrear: das was du schreibst ist etwas merkwürdig.
Wenn du Media-Queries verwendest dann werden nicht verwendete Klassen auch nicht interpretiert.
Was meinst du mit alle alten Regeln überschreiben und korrigieren. Klassen die definiert sind werden verwendet egal wo und wie sie, nach CSS-Regeln geschrieben sind.
Mehrere CSS-Dateien erhöhen so nebenbei auch die HTTP-Requests und verlangsamen das laden der Seite.

Grüße

Mal angenommen ich habe für volle auflösung:

div.sample {
width: 49%;
}

und in der mobile version braucht dieses div keine breite mehr weil es ja ohnehin ein block element ist und auf voller breite dargestellt werden soll.

Dann muss ich unten in der css, wo ich das media query für mobile habe diese eingabe korrigieren.

Habe ich aber eine einzelne css für mobile mache ich einfach keine Angabe dazu und es ist automatisch auf 100%.

Übrigens erhöht die Aufteilung auf mehrere css dateien nicht die anzahl der HTTP-Requests, weil ich ja die Abfage erst einmal mit dem media-Attribut in dem link Tag mache. Also wird nur geladen, was die Abfrage erfüllt - immer nur eine css, oder? Aber selbst wenn. Google PAge Speed Meckert nicht. Immerhin verringere ich damit die Anzahl der CSS Deklarationen insgesamt. Auch große Seiten wie amazon und ebay laufen mit mehreren css Dateien. Wenn ich also von 3 Dateien für die drei wichtigsten Ausgabegeräte ausgesehe ist das schon okay ^^. Man kann die performance an anderer Stelle wieder rein holen, z.B. durch gzip komprimierung der CSS und JS Dateien.