Flexbox und Media-Query für responsives Design

[tutto]

1.) Ich habe einen container flex und zwei Boxen die sich auf die Breite teilen.

2.) Für die kleine Screenportbreite möchte ich ein Media-Query verwenden. Im Sinne von responsivem Design will ich am Code so wenig wie möglich ändern. Und die Boxen nun untereinander stellen.
Ich würde im container von flex auf inline wechseln.

Frage: geht das denn so? Was mich irritiert: kann ich dem selben Selektor innerhalb eines neuen Media-Querys einfach eine neue Eigenschaft verpassen? Oder wie muss das gehen?

 

[Myhar]

Der Sinn von responsive Design ist nicht, dass du so wenig wie möglich am Code änderst. responsive heißt lediglich, dass es auf die einzelnen Größen die verfügbar sind reagiert (und jetzt mal adaptive, selective, etc. einzuschließen)

Also ja, du kannst einfach bei einem mediaquery die Eigenschaften von einem Element ändern. Dafür sind sie ja da. Wozu sollte man sie sonst auch haben?

 

[owieortho]

Der aufrufende Browser "weiss" auf welchem Gerät er läuft und die mediaquery stellt ihm die passenden stylesheets für unterschiedliche Ausgaben zur Verfügung. Im HTML bleibt alles ausgezeichnet, wie es ist. Den Trick besorgen die unterschiedlichen CSS-Dateien, die dann mithin jedem vorhandenen Selektor ein neues Attribut-Werte-Paar zuschreiben - also schon mehr als wenig Änderung.

Schönen Tag
O.

 

[afr0kalypse]

wenn du flexbox nutzt, dann nutze doch auch die flex eigenschaften.
media query small = flex-directon column
media query > small = flex-direction row