Responsive Layout in HTML

[moonwalker99]

Ich möchte ein einfaches Responsive Layout in HTML bauen. Bei geringer Bildschirmbreite, z.B. im Smartphone, soll sich das Layout anpassen. Sowas geht mit CSS, habe mich aber nie damit beschäftigt.

Wie sieht es mit dem Aufklapp-Menü aus? Geht sowas auch ohne Javascript?

Bin auch für weiterführende Links dankbar.

 

[Madman1209]

Hi,

benutze doch ein Responsive Framework wie Bootstrap - dann musst du dich nicht mit sowas aufhalten.

VG,
Mad

 

[0x8100]

auf z.b. html5up gibt es einige themes als vorlage dazu. gleich mit ansicht für verschiedene geräteklassen.

 

[Crizzo]

Ich möchte ein einfaches Responsive Layout in HTML bauen. Bei geringer Bildschirmbreite, z.B. im Smartphone, soll sich das Layout anpassen. Sowas geht mit CSS, habe mich aber nie damit beschäftigt.

Ich weiß jetzt nicht so ganz, was die Frage ist. Aber HTML und CSS solltest du schon können. Für CSS brauchst du dann einen media-query:

@media (max-width: 850px) {
    margin: 10px 0;
}

etc.

Am besten liest du dir ein Tutorial durch, wie man sowas anfängt: https://www.w3schools.com/Css/css_rwd_intro.asp

Wie sieht es mit dem Aufklapp-Menü aus? Geht sowas auch ohne Javascript?

Ja, geht: https://shellcreeper.com/full-css-responsive-navigation-toggle-no-javascript/ & https://codeconvey.com/mobile-navigation-menu-css/

oder andere mit JS:
https://www.w3schools.com/howto/howto_js_mobile_navbar.asp

 

[moonwalker99]

Ich weiß jetzt nicht so ganz, was die Frage ist. Aber HTML und CSS solltest du schon können. Für CSS brauchst du dann einen media-query:

Ich kann HTML und CSS, bin aber kein Profi. Ich habe einmal eine Vorlage für ein ebay-shop gesehen, als ich das Fenster schmaler gemacht habe, wurden im Menü der Text mit Symbolen ersetzt. Das sah gut aus.

 

[Crizzo]

Da kannst du zum Beispiel so machen: (hier via FontAwesome Icon-Set): https://fontawesome.com/icons/users?style=solid

<a href="#"><i class="fa-users"></i><span>Linktext</span></a>

Und jetzt gehst du einfach hin und blendest bei einer "Screen"/Browserbreite < abc Pixel einfach per CSS den <span> innerhalb vom Link aus. Dann bleibt nur noch das Icon da, klickbar und sichtbar. Oder per JS oder beides parallel.

 

[BeBur]

Raw-CSS war doch immer ein Riesen abfuck wegen den verschiedenen Browsern, ist das heute nicht mehr so? Ich würde daher auch zu Bootstrap raten das sich dann für dich um die Eigenheiten der verschiedenen Browser kümmert und ich würde vermuten es ist gleichzeitig einfacher, ein professionelles Ergebnis zu erzielen wie wenn man das CSS selber schreibt (also als Laie).

 

[Fombu]

ist das heute nicht mehr so

Kaum, FF/Chrome(bzw alle Chromium-basierten) als die 2 Hauptbrowser halten sich an Standards (von bleeding edge abgesehen). Und IE ist nur noch so marginal vertreten, dass ich den nicht mal mehr beachten würde.

 

[floq0r]

Sehe ich auch so, aus Entwickler-Sicht ein sehr angenehmer Umstand.
Was Layout betrifft verwende ich JS nur dort wo es sich nicht vermeiden lässt.

 

[KitKat::new()]

Wie sieht es mit dem Aufklapp-Menü aus? Geht sowas auch ohne Javascript?

Mit TailwindCSS trivial:

YouTube

An dieser Stelle steht ein externer Inhalt von YouTube, der den Forumbeitrag ergänzt. Er kann mit einem Klick geladen und auch wieder ausgeblendet werden.

YouTube-Embeds laden

Ich bin damit einverstanden, dass YouTube-Embeds geladen werden. Dabei können personen­bezogene Daten an YouTube übermittelt werden. Mehr dazu in der Datenschutzerklärung.

YouTube-Embeds laden

Datenschutzerklärung

 

[moonwalker99]

Klar würde ein Framework einiges an Arbeit ersparen, ich möchte ein sehr schlankes Layout basteln und verstehen, was da passiert. Etwas CSS kann ich ja. Auch möchte ich komplett ohne Javascript auskommen.

Man kann mit CSS ein Suchfeld realisieren, indem man auf ein Symbol klickt und danach ein Suchfeld erscheint. Man braucht aber auch eine Fallback-Lösung mit Buttons, für Browser, die den Code nicht verstehen.

 

[Fombu]

Für "Aufklapp"-Menus nutz ich (zumindest intern) in letzter Zeit oft den details-Tag. Ist semantisch zwar nicht richtig, funktioniert aber richtig gut.