Media Queries im HTML Code

[Jessica]

Guten Abend,

hab eine Frage, ist es möglich, dass ich Media Queries auch im HTML einsetzte? Ich möchte z.B. sagen wenn @media screen and (max-width: 699px) dann sollte ein DIV ausgeblendet werden, wenn @media all and (max-width: 899px) soll eine andere Strucktur genommen werden.

Hoffe Ihr versteht was ich meine.

Gruß
Jessica

[molily]

Hallo,

Media-Queries kannst du in eingebetteten <style>…</style>-Elementen und in externen Stylesheets verwenden, die mit <link rel="stylesheet"> verlinkt sind. In style-Attributen (Inline-Styles) können sie nicht verwendet werden.

In der Regel sollten CSS-Regeln in externen Stylesheets liegen. Wenn das nicht möglich ist, gibt es style-Elemente, mit denen CSS-Regeln direkt im HTML notiert werden können. style-Elemente sind allerdings nur im head erlaubt (ohne scoped-Attribut).

Ich hoffe, das beantwortet deine Frage…?

Grüße,
Mathias

[Gunnar Bittersmann]

@@Jessica:

nuqneH

hab eine Frage, ist es möglich, dass ich Media Queries auch im HTML einsetzte? Ich möchte z.B. sagen wenn @media screen and (max-width: 699px) dann sollte ein DIV ausgeblendet werden

Mit „ausgeblendet“ meinst du hier, es soll gar nicht im DOM sein?

wenn @media all and (max-width: 899px) soll eine andere Strucktur genommen werden.

Mit „andere Stru_k_tur“ meinst du ein anderes DOM?

Nein, das ist mit HTML nicht möglich. Du könntest je nach Client den Server verschiedene HTML-Ressourcen ausliefern lassen. Aber bitte mit gleichen Inhalten und unter demselben URI.

Qapla'

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

Nein, das ist mit HTML nicht möglich. Du könntest je nach Client den Server verschiedene HTML-Ressourcen ausliefern lassen. Aber bitte mit gleichen Inhalten und unter demselben URI.

RESS dürfte der Suchbegriff dazu sein.

Oder mit unobstrusivem JavaScript das DOM je nach Clientgegebenheiten ändern.

Qapla'

[Jessica]

Hallo,

was ist bitte an diesem Stück Code falsch?

@media all (min-width: 481px) and (max-width: 698px)
{

.sidebar1 {  
	width:100px;  

}
}

ich möchte damit erreichen wenn das Fenster zwischen 481px und maximal 698px ist, soll die sidebar1 auf 100px gehen, aber er geht erst gar nicht in das @media rein. Was mache ich falsch?

Gruß
Jessica

[Gunnar Bittersmann]

@@Jessica:

nuqneH

was ist bitte an diesem Stück Code falsch?

@media all (min-width: 481px) and (max-width: 698px)

▲
1. Syntaxfehler.

2. Du verwendest px anstatt em als Einheit in Media-Queries.

.sidebar1 {

Du verwendest nichtssagende Klassenbezeichner. Was unterscheidet sidebar1 von sidebar2?

Qapla'

[Jessica]

Hallo,

@media all (min-width: 481px) and (max-width: 698px)
             ▲

1. Syntaxfehler.

diesen habe ich auch bemerkt, siehe in meinem zweiten Posting :) aber danke dir für die Hilfe.

2. Du verwendest px anstatt em als Einheit in Media-Queries.

Ich weiß, das wird mir auch in dem Videotraining empfohlen, aber ich kenne mich mit EM noch nicht so aus, dieses bezieht sich doch auf die Größe, die der User eingestellt hat richtig?

Du verwendest nichtssagende Klassenbezeichner. Was unterscheidet sidebar1 von sidebar2?

Da kann ich leider jetzt nichts ändern, das kommt von Joomla, dann müsste ich das ganze Template ändern und ich denke das ist zu viel arbeit.

In Joomla ist sidebar1 Links & sidebar2 rechts

Gruß
Jessica

[Matthias Apsel]

Om nah hoo pez nyeetz, Gunnar Bittersmann!

@media all (min-width: 481px) and (max-width: 698px)
             ▲

1. Syntaxfehler.

Hätten wir eine proportionale Schrift eingestellt, so müsstest du das als Code auszeichnen.

@media all (min-width: 481px) and (max-width: 698px)  
          ▲

Aber ich habe es befürchtet: Es wird über die Schriftart gemeckert (nein, ich möchte die Diskussion nicht wiederholen), ich stell mir zu Testzwecken eine Proportionalschrift ein und bin dann der einzige, der damit unterwegs ist. ;-)

Matthias

[ChrisB]

Hi,

was ist bitte an diesem Stück Code falsch?

@media all (min-width: 481px) and (max-width: 698px)

Da fehlt ein “and” zwischen der ersten und der zweiten „Bedingung”.

MfG ChrisB

[Jessica]

Hallo ChrisB,

Da fehlt ein “and” zwischen der ersten und der zweiten „Bedingung”.

Danke dir!

Gruß
Jessica

[Jessica]

Hallo,

hab den Fehler gefunden, es muss so heißen:

@media screen and (min-width: 481px) and (max-width: 698px)

hab das erste "and" vergessen. Mal nee Frage zu meinen medias, ist das eine gute abfrage:

1.)
@media all and (max-width: 480px)

2.)
@media screen and (min-width: 481px) and (max-width: 698px)

3.)
@media all and (max-width: 699px)

Gruß
Jessica

[Auge]

Hallo

hab den Fehler gefunden, es muss so heißen:

@media screen and (min-width: 481px) and (max-width: 698px)

hab das erste "and" vergessen. Mal nee Frage zu meinen medias, ist das eine gute abfrage:

nöö ...

1.)
@media all and (max-width: 480px)

2.)
@media screen and (min-width: 481px) and (max-width: 698px)

3.)
@media all and (max-width: 699px)

... denn was machst du mit Breiten über 699px? ;-)

Hier wäre min-width fällig. Andererseits sind 699px für meinen Geschmack ein wenig schmal für die "letzte" Stufe.

Tschö, Auge

[Jessica]

Hallo,

Hier wäre min-width fällig. Andererseits sind 699px für meinen Geschmack ein wenig schmal für die "letzte" Stufe.

hmm ich weiß nicht wie Joomla bzw. das Template das macht, wenn ich ab 700px bin, dann wird das default CSS gezogen sprich für den Desktop!

Gruß
Jessica

[Auge]

Hallo

Hier wäre min-width fällig. Andererseits sind 699px für meinen Geschmack ein wenig schmal für die "letzte" Stufe.

hmm ich weiß nicht wie Joomla bzw. das Template das macht, wenn ich ab 700px bin, dann wird das default CSS gezogen sprich für den Desktop!

Ja, dann funktioniert es so, wie du es eingestellt hast. Deine Frage war aber, ob die Werte so iO sind. <zitat>Mal nee Frage zu meinen medias, ist das eine gute abfrage</zitat>. Wie gesagt, für meinen Geschmack sind 699px ein wenig schmal für die "letzte" Stufe.

Tschö, Auge

[Gunnar Bittersmann]

@@Auge:

nuqneH

Andererseits sind 699px für meinen Geschmack ein wenig schmal für die "letzte" Stufe.

Da sich Breakpoints nicht nach Geräten, sondern nach den Inhalten richten sollten, entbehrt die Aussage angesichts der Unkenntnis der Inhalte jeder Grundlage.

Qapla'

[Auge]

Hallo

Andererseits sind 699px für meinen Geschmack ein wenig schmal für die "letzte" Stufe.

Da sich Breakpoints nicht nach Geräten, sondern nach den Inhalten richten sollten, entbehrt die Aussage angesichts der Unkenntnis der Inhalte jeder Grundlage.

Im Lichte der Worte "für meinen Geschmack" gilt dies auch für die Deine.

Tschö, Auge

[Matthias Apsel]

Om nah hoo pez nyeetz, Auge!

Andererseits sind 699px für meinen Geschmack ein wenig schmal für die "letzte" Stufe.
Da sich Breakpoints nicht nach Geräten, sondern nach den Inhalten richten sollten, entbehrt die Aussage angesichts der Unkenntnis der Inhalte jeder Grundlage.
Im Lichte der Worte "für meinen Geschmack" gilt dies auch für die Deine.

Es geht nicht um den Geschmack, sondern eher darum, dass es Geräte mit äußerst unterschiedlichen Pixeldichten gibt und daher die Einheit px für einen Breakpoint ungeeignet ist.

Matthias

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

Es geht nicht um den Geschmack, sondern eher darum, dass es Geräte mit äußerst unterschiedlichen Pixeldichten gibt

Nö, darum geht es nicht.

und daher die Einheit px für einen Breakpoint ungeeignet ist.

Nicht daher, sondern daher.

Qapla'

[Auge]

Hallo

und daher die Einheit px für einen Breakpoint ungeeignet ist.

Nicht daher, sondern daher.

Der Artikel ist doch mal eine Ansage mit verständlichen Argumenten.

<zitat>Start with the small screen first, then expand until it looks like shit. Time for a breakpoint! -Stephen Hay</zitat>

Der Artikel ruft (u.A.) dazu auf, für die Dimensionsangaben in den Media Queries relative Einheiten statt px zu verwenden. Gut, nur wenn Jessica (weil's grad ihr Thread ist) die Dimension so wählt, dass (ausgehend von mobile first) für den letzten Breakpoint, mit z.B. em gesetzt, irgendwas in der Nähe von 699px rauskommt, ist das "für meinen Geschmack" immer noch zu schmal, um _alle_ Viewports, die diese oder eine größere Breite haben, abzufrühstücken. Darauf und nur darauf will ich hinaus.

In meiner neuen Firma z.B. wurde ich zutiefst "geschockt", dass fast alle Mitarbeiter es für normal halten, den Browser auf einem Full-HD-Display im Vollbildmodus zu betreiben. Nun stell dir mal vor, es wird dort die gleiche Aufteilung/die gleichen Design-Einstellungen wie bei (spekulativen) 720px Viewport-Breite benutzt. Bei den typischerweise benutzten Schriftgrößen bleibt bei begrenzter Breite des Designs viel leerer Platz oder es gibt ellenlange Zeilen. Das ist beides nicht meins.

Ja ja, ich weiß, dass es schicke Seiten gibt, die mit angepasster Schriftgröße die gesamte Breite ausnutzen und gleichzeitig schmale Zeilen haben. Aber das dem Chef für die Firmenwebsite zu verkaufen, wenn der selbst sowas nicht kennt und schätzt, dürfte eine <nachguck /> Sisyphos-Aufgabe sein.

Tschö, Auge

[Gunnar Bittersmann]

@@Auge:

nuqneH

nur wenn Jessica (weil's grad ihr Thread ist) die Dimension so wählt, dass (ausgehend von mobile first) für den letzten Breakpoint, mit z.B. em gesetzt, irgendwas in der Nähe von 699px rauskommt, ist das "für meinen Geschmack" immer noch zu schmal, um _alle_ Viewports, die diese oder eine größere Breite haben, abzufrühstücken. Darauf und nur darauf will ich hinaus.

Für sowas wie body { max-width: 60em } braucht man keine Media-Queries.

Qapla'