Responsive Design

Hallo, ich habe ein Weblayout mit einer Breite von 1600px. Ich möchte das Layout gerne responsive machen.

Gibt es irgendwelche Standardabmessungen für Tablets bzw. Smartphones? Oder orientiert man sich an einem der großen Hersteller (Apple, Samsung)?

Eben mal geschaut. Bootstrap geht von folgendem aus:

// 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) { ... }

Denke daran kannst du dich gut orientieren (oder direkt bootstrap verwenden)

1 „Gefällt mir“

In den gängigen Browsern, (Chrome, Firefox) gibt es die Developer Konsole (F12).

Diese beinhalten eine Device-Toolbar mit dem man verschiedene Geräte simulieren kann. Erstmal wichtig und hilfreich zum Testen.

Und dort sind eben schon diverse Geräte vorkonfiguriert. Galaxy, diverse Pixel und die ganze Apple Palette. Aber auch Mobil S,M,L, Tablet etc. als generische Typen.
Da würde ich mich an die entsprechenden Werte halten.

2 „Gefällt mir“