Deutliche Layouts im Vergleich zu einem reaktionsfähigen Layout für unterschiedliche Gerätegrößen und Ausrichtungen

Question

Ich habe spezifische Layouts für jede Kombination aus Desktop/Tablet/Smartphone und Hochformat/Querformat. Im Kontext einer Single Page Application, ist es besser, die Layouts als verschiedene Ressourcen zu trennen und laden Sie sie mit einigen Javascript/CSS-Logik zu Gerätetyp und Ausrichtung zu erkennen oder eine einzelne HTML/CSS-Ressource zu haben und das Layout mit einigen komplexen Medien Abfrage zu unterscheiden/Dekorationslogik?

Für die erste Option sehe ich die Nachteile der Duplizierung, weil es wahrscheinlich ist, dass die Layouts für den gleichen Abschnitt eine konsistente Menge an Elementen teilen; für letzteres sehe ich, dass es sehr komplex sein kann, alle unterschiedlichen Kombinationen von Gerätegröße/Orientierung innerhalb desselben HTML/CSS zu handhaben, besonders wenn die Layouts signifikante Unterschiede zueinander haben.

Was ist der beste Ansatz und warum?

Answer 1

Sie sollten Medienabfragen verwenden. Sie sind viel besser, weil Sie nicht den ganzen Code neu schreiben müssen, Sie müssten nur die Dinge ändern, die tatsächlich geändert werden müssen und den Rest so lassen, wie er ist. Auf diese Weise können Sie die gleiche HTML wiederverwenden, anstatt eine andere HTML für mobile zu haben, Desktop, Tablet etc ...

Es wird viel weniger Arbeit als eine separate Seite für jede Bildschirmgröße machen ...

Answer 2

I würde für die zweite Option gehen, wird es einfacher sein, die CSS zu verwalten, anstatt alles zu duplizieren, ist DRY die beste Möglichkeit, in diesem Fall zu arbeiten.

Wenn Sie einen Präprozessor wie Sass oder Less verwenden, können Sie am unteren Ende des Stylesheets einige Bedingungen hinzufügen, um zusätzliche Stile für jede Ausrichtung zu erhalten.

Hier sind einige weitere Informationen auf dem Prinzip der DRY: http://vanseodesign.com/css/dry-principles/

Einige der wichtigsten Aspekte sind:

• Gruppe wiederverwendbarer CSS-Eigenschaften zusammen
• Namen diese Gruppen logisch
• Fügen Sie Ihre Selektoren zu den verschiedenen CSS-Gruppen hinzu

Keeping Dinge mit Medien organisiert abfragt

Mit dem Haupt Batzen Styling ganz oben auf der Seite Medien-Anfragen wie diese für mobiles, mobiles Portrait und mobile Landschaft können dann verwendet werden, um alle Verbesserungen hinzufügen nach Bedarf:

/* Portrait and Landscape */ 
@media only screen 
    and (max-device-width: 480px) { 

} 

/* Portrait */ 
@media only screen 
    and (max-device-width: 480px) 
    and (orientation: portrait) { 
} 

/* Landscape */ 
@media only screen 
    and (max-device-width: 480px) 
    and (orientation: landscape) { 

}