# Aufbau Responsive

**URL:** <https://forum.shopware.com/t/aufbau-responsive/33206>\
**Category:** Sonstiges\
**Created:** [25. Dezember 2015 um 21:17 UTC](https://forum.shopware.com/t/aufbau-responsive/33206 "2015-12-25T21:17:12Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![danwir](https://avatars.discourse-cdn.com/v4/letter/d/eada6e/32.png) [@danwir](https://forum.shopware.com/u/danwir)\
**Post date:** [25. Dezember 2015 um 21:17 UTC](https://forum.shopware.com/t/aufbau-responsive/33206/1 "2015-12-25T21:17:12Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![simkli](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/simkli/32/13124_2.png) [@simkli](https://forum.shopware.com/u/simkli)\
**Post date:** [25. Dezember 2015 um 22:06 UTC](https://forum.shopware.com/t/aufbau-responsive/33206/2 "2015-12-25T22:06:43Z")

</div>

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 😉 . Hier ein paar Links: [list] [\*] [em statt Pixel Werte](http://snook.ca/archives/html%5C_and%5C_css/font-size-with-rem)[/\*] [\*] [Shopware Styletile ( mit allen Mixins, Less Variablen und Größen )](https://developers.shopware.com/styletile/)[/\*][/list] Viele Grüße

---

<div class="post-metadata">

**Author:** ![danwir](https://avatars.discourse-cdn.com/v4/letter/d/eada6e/32.png) [@danwir](https://forum.shopware.com/u/danwir)\
**Post date:** [26. Dezember 2015 um 00:39 UTC](https://forum.shopware.com/t/aufbau-responsive/33206/3 "2015-12-26T00:39:44Z")

</div>

Super vielen Dank, dan probiere ich noch etwas rum.