Hallo zusammen!
Also:
Ich habe nun den Shop für den Desktop & iPhone 6 optimiert.
(min-width: 768px & max-width: 768px)
Leihe ich mir vor 2 Tagen ein Tablet. (Acer Iconia One 10)
Und schwups, das Layout passt nicht.
Jetzt ne Frage an euch:
Wie finde ich nun die Auflösung heraus?
Und welche Auflösungen sind am Wichtigsten?
Buon giorno!
Also Bootstrap 4 (WAVE) geht von folgenden werten aus:
// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
Grundsätzlich würde ich mobile first anfangen und mich dann nach oben arbeiten. Das heißt du arbeitest ausschließlich mit (max-width) werten. Je mehr Extrawürste du für einzelne Viewports mit (min-width) schreibst, desto mehr re-renderings hast du.
Es ist nicht Grundsätzlich schlecht, aber es wäre die sauberste Lösung.
Lieben Gruß
Tino
Wenn ich es so machen würde, dann passt es am Smartphone auch nicht mehr.
das liegt daran, dass dieser Breakpoint nicht direkt für Smartphones ist:
Beim “mobile first” Ansatz konstruiert man seine CSS so, dass es auf Smartphones ausgerichtet ist. Und für alle größeren Geräte gibt es eben die genannten Breakpoints mit “min-width”.
Du hast ja ein Child Theme von Flow und Flow ist auf Bootstrap v3.3.5 aufgebaut. Schau dir am besten die Infos zu den Break Points und Media Queies in der Doku von dieser speziellen Bootstrap Version an.
Aber es kann ja nicht sein, dass man z.B.: 10 verschiedene Auflösungen einfügen muss.
muss man auch nicht, außer man möchte unbedingt, dass die Seite in 10 verschiedenen Auflösungen jedes mal anders aussieht. Mit den vordefinierten Breakpoints von Bootstrap ist schon alles wichtige abgedeckt.
OK. Ich hab nun 2.
max-width: 768px -> für Smartphones
min-width: 768px -> Laptop
Welche nun für Tablets?
hier ist ein Screenshot aus der Bootstrap Doku, die ich vorhin wärmstens empfohlen hatte.
Da steht bei jedem Breakpoint eine Beschreibung dabei:
This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.
