Webseiten für mobile Geräte umstellen

Hallo zusammen,

ich möchte gerne unsere Vereinshomepage für mobile Geräte optimieren, aber weiß nicht so recht wie man das angeht. Ich habe dazu schon vieles gelesen nur wie man es schlussendlich realisiert da blicke ich im Augenblick noch nicht durch.
Ich weiß zwar jetzt, dass vieles mit Media Queries realisiert werden kann. Aber bei welcher Seitenbreite die Breakpoints gesetzt werden solten und welche Schriftgrößen von Vorteil wären und einiges mehr ist mir noch völlig unklar.
Gibt es eine gute Seite wo solche Dinge und die Vorgehensweise zum Aufbau von Webseiten für mobile Geräte verständlich erklärt wird, auch für einen relativen Anfänger?
Danke!

Gruß
Thomas

Bei Brakepoints halte ich mich immer an die Raster der großen Frameworks. z.B. https://getbootstrap.com/docs/5.0/layout/breakpoints/

Am besten auch direkt ein solches verwenden, dann muss man das Rad nicht neu erfinden sondern kann direkt mit deren Klassen und Spalten arbeiten.

Die Breakpoints setze ich bei individuellen Layouts so, wie es das Layout verlangt.
Ansonsten ist für Fragen dieser Art der Blog von Kulturbanause ein guter und m.E. für Anfänger geeigneter Anlaufpunkt https://blog.kulturbanause.de/

Danke für die Rückmeldungen, jetzt ist mir klar welche Breakpoints zu definieren sind.

Aber nun gibt es für mich noch eine weitere Frage. Kann man für die einzelnen Breakpoints ein eigenes externes Stylesheet erstellen? So das man nicht bei jedem Selektor die Media Queries angeben muss, sondern nur 1x pro Stylesheet angeben muss. Ist dies möglich?

Gruß
Thomas

Ja kann man.
Ich mache das schon seit Jahren nicht mehr. Ist m.E. auch nicht mehr empfohlen, das es deutlich übersichtlicher ist, wenn alle Definitionen für ein Element an einer Stelle "sichtbar" sind.

Zitat:

---

Zitat von Thomasge

Aber nun gibt es für mich noch eine weitere Frage. Kann man für die einzelnen Breakpoints ein eigenes externes Stylesheet erstellen? So das man nicht bei jedem Selektor die Media Queries angeben muss, sondern nur 1x pro Stylesheet angeben muss. Ist dies möglich?
Gruß
Thomas

---

Kann man...würde ich aber nicht. Z.b. hättest du dann für die Formatierung einer Überschrift 3 Stylesheets, deren Pflege total unübersichtlich wäre. Wenn man das im Element selbst verschachtelt ist es viel übersichtlicher und das allein schon bei "nur" einer Überschrift.

Code:

---

h1{
    font-size:1.55rem;
    font-weight:500;
   
    @media all and (max-width: $break-md) {
        font-size:1.45rem;
    }   


    @media all and (max-width: $break-xs) {
        font-size:1.3rem;
    }       
}

---