Aufbau Responsive

Hallo, ich sehe gerade vor lauter Bäumen den Wald nicht mehr, vielleicht könnt ihr mir kurz helfen. Zum Thema Responsive: Wenn ich z.B. die Schriftgröße anpassen will… dan schreibe ich ganz normal //Basic .irgendwas {font-size: 20px;} so jetzt soll es aber bei einer Auflösung von 1024px kleiner angezeigt werden: ich würde jetzt schreiben: @media screen and (min-width: @tabletLandscapeViewportWidth){ .irgendwas {font-size: 15px;}} und für 768px noch kleiner … @media screen and (min-width: @tabletViewportWidth) { .irgendwas {font-size: 10px;}} Ich verstehe jetzt nicht ganz was vorang hat. Ich habe das mal mit …max-width probiert aber dan ging alles in die Hose. Für welche Größe ist die Basic da ? Was bedeutet den genau das min-width ? Ich verstehe das so, ist die Ansicht mindestens 768px groß dann führe aus… Was ist wenn diese aber kleiner ist… wird dann auf die Basic zurückgegriffen ? Bzw. was ist wenn diese 1024px ist ? wird von der kleinen 768px vererbt ? Weil bei einer 1024 px sind die min. 768px doch erfüllt oder nicht ? Heute morgen klappte alles noch aber heute Abend haut nix mehr hin…Hilfe.

Hallo danwir, [quote=„danwir“][…]so jetzt soll es aber bei einer Auflösung von 1024px kleiner angezeigt werden […][/quote] Das ist genau der falsche Ansatz. Fang am besten gleich richtig an: Versuche nicht den Desktop aufs Smartphone zu bringen sondern fange bei der Smartphoneansicht an. (Mobile First. Shopware’s Responsive Theme basiert auch durchgehend auf diesem Ansatz.) Außerdem: Die Schriftgröße wird nicht direkt in Pixel angeben. Verwende stattdessen das zugehörige Mixin „unitize“. Dieses rechnet dir gleich alle Größen in die richten ®em Werte um. Wenn du dann später mal die Basisschriftgröße ändern solltest wird gleich alles richtig umgerechnet. // Smartphone #meinBlock { .unitize(10); } // Tablet @media screen and (min-width: @tabletViewportWidth) { #meinBlock { .unitize(15); } } // Tablet Landscape @media screen and (min-width: @tabletLandscapeViewportWidth) { #meinBlock { .unitize(20); } } min-width @tabletViewportWidth : minimale-Breite @tabletViewportWidth => Ab @tabletViewportWidth (768px) gelten die entsprechenden CSS Attribute. Wenn du von klein nach groß aufbaust sollte dich das nicht mehr verwirren :wink: . Hier ein paar Links: [list] [*] em statt Pixel Werte[/*] [*] Shopware Styletile ( mit allen Mixins, Less Variablen und Größen )[/*][/list] Viele Grüße

Super vielen Dank, dan probiere ich noch etwas rum.