Auf Thema antworten 2026

JavaScript ist deaktiviert. Für eine bessere Darstellung aktiviere bitte JavaScript in deinem Browser, bevor du fortfährst.

Beitrag: <blockquote data-quote="randacek_pro" data-source="post: 2030440" data-attributes="member: 326684">AW: Hilfe, Media Queries für mobile devicesHallo mia,bei diesen Media-Queries handelt es sich nicht um exklusive Angaben, also du entwickelst kein Design nur für 480px, 768px und 1024px, sondern hier bedeutet es halt: alle Viewports unter (einschließlich bis) 480px werden vom ersten Fall angesprochen, darauf baut dann der zweite Fall auf (der alle von 481 bis einschließlich 768px) anspricht und alle von 769 bis 1024px werden vom dritten Fall angesprochen, obwohl da auch eine Begrenzung auf 1200px angibst.Das heißt: diese Styles, so sollte es ja auch sein, funktionieren fließend - es ist ein fließendes (floating) Layout, weshalb man eben auch nicht für jede Auflösung eine eigene Versionen designen müssen sollte <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite1" alt=":)" title="Smile    :)" loading="lazy" data-shortname=":)" />Nur eben die jeweils relevanten Unterschiede, die sich aus der Größenänderung ergeben werden überschrieben. Genau das ist das CSS = Cascading Style Sheet - es arbeitet also kaskadierend. Daher brauchst du nicht immer alles neu zu definieren, sondern änderst quasi nur das, was sich auch wirklich verändert (Bsp: ein Bild kann bei einer Gesamtbreite von 480px im Layout nicht ganz so groß dargestellt werden, als wenn dir insgesamt 1024px zur Verfügung stehen, dann kann das Bild auch mehr Platz einnehmen) - was aber genau der Gedanke responsiven Designs ist, nämlich, dass sich die Größe "dynamisch" an den vorhandenen Platz anpasst und du damit gar nicht so oft unterscheiden brauchst, da es sehr unpraktisch wäre, wenn nehmen wir mal an, dir halt keine 480px zur Verfügung stehen, sondern nur 390px... oder 520, usw...Genau deswegen meine ich ja, es greift fließend, ein gutes, stabiles Design braucht keine x-zig-fachen Unterscheidungen, sondern passt sich dynamisch an. Daher greift es halt für zB alle Größen zwischen 1 und 480px in der Breite (wobei 1px jetzt nur zur Veranschaulichung der Funktionsweise dienen soll - das ist natürlich in der Praxis Quatsch <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite1" alt=":)" title="Smile    :)" loading="lazy" data-shortname=":)" /> ).Es gibt immer Elemente, die in ihrem Verhalten und ihrer Funktion gleich bleiben - daher das "Grund-"CSS, kaskadierend, je nach Fallunterscheidung, bauen die anderen darauf auf, und nur, wenn sich etwas wirklich signifikant dahingehend ändern muss, dass die Größenverhältnisse sonst nicht mehr mit dem Grundlayout vom Konzept her übereinstimmen würden, werden die Einstellungen überschrieben.Deswegen "erben" diese folgenden Fälle immer die Eigenschaften des "bis-480px-CSS" und ergänzen sie aufeinander aufbauend, kaskadenhaft, wie bei einem Springbrunnen, der in Stufen/Treppen "feuert", nur das, was jeweils angepasst werden muss.Dann rutscht da auch nix durch.Eher noch ein Problem ist, dass du eine  Begrenzung nach oben angibst[HTML]@media only screen and (min-width: 1024px) and (max-width: 1200)[/HTML] was soll also mit Viewports größer als 1200px geschehen? <img src="/styles/default/xenforo/smilies/zwinker.gif"  class="smilie" loading="lazy" alt=";)" title="Wink    ;)" data-shortname=";)" />Bspw. da du ja versuchst, dich an alle denkbaren Situationen anzupassen, wenn jemand einen Widescreen mit 2650x1600 hat, und die Fläche, die deine Website in seinem Browser auf dem Screen einnehmen kann dann vielleicht so 2600px wäre (nur mal als Gedankenspiel)? Dann würdest du genau genommen ja keine Anweisung für diesen Fall definieren <img src="/styles/default/xenforo/smilies/zwinker.gif"  class="smilie" loading="lazy" alt=";)" title="Wink    ;)" data-shortname=";)" />Also, es geht hier nicht darum, für jeden Viewport eine eigene Version zu schaffen, sondern das Layout so zu gestalten, dass es immer ordentlich funktioniert.Daher wäre hier eine Größenbeschränkung eher kontraproduktiv, da du sie am oberen Ende der Fallunterscheidungen ansetzt. Sinn machen würde das nur, wenn du einen speziellen Fall herauspicken willst, wo dein Design an einen genau definierten Viewport angepasst werden soll. Zwar bieten die Media Queries diese Möglichkeit, aber wie gesagt, es ist nicht sehr produktiv grundsätzlich so heranzugehen, dass du wirklich für jedes Gerät, jeden Bildschirm, usw. eine eigene Version anfertigst - denn erstens ist das ein riesiger Aufwand (auch von der Wartung) und zweitens kann es dann immer Fälle geben, die man nicht bedacht hat.Also es geht darum, das Aussehen möglichst überall konsistent gleich zu halten - und dazu sollten maximal ein paar Fallunterscheidungen "genügen".Was für eine Seite soll es denn genau werden?Lieber Gruß</blockquote> Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung: Wenn ▲ = 7, ▼ = 3, ◇ = 2 und die Summe von ▲ und ▼ durch ◇ geteilt wird, was ist das Ergebnis?