HTML Website für alle Bildschrimgrößen anpassen?

...komplette Frage anzeigen 1920x1080 - (Smartphone, html, anpassen) Smartphone - (Smartphone, html, anpassen)

6 Antworten

Ich habe soweit die HTML Website fertig, jedoch muss ich diese noch an alle Bildschrimgrößen anpassen. (siehe Bilder wie es z.B. auf Smartphone Größe aussieht)

Das dein Layout nicht auf Geräten mit kleinerem Viewport dargestellt werden kann, sollte eigentlich klar sein. Dein Ansatz ist an sich schon falsch. Freunde dich daher mit Media Queries und allgemein  mit (mobile oder middle-first) responsive Webdesign an. Auch wenn ich dein Markup nicht kenne, eine Tabelle da nichts zu suchen hat. Tabellen sollten ausschließlich zur Darstellung tabellarischer Daten, jedoch nicht zum Layouten einer Website genutzt werden. Dir auch gleich vieles leichter fallen wird, wenn du ein Grid-System verwendest. Sei es ein Framework wie Bootstrap oder Foundation, oder lediglich ein Grid wie Skeleton. 

Was jetzt deine Website angeht, erst einmal dein Layout überarbeiten solltest. Mach dir Gedanken wie beispielsweise die Navigation auf mobilen Endgeräten dargestellt werden soll. Sofort sichtbar oder als Off-Canvas mit Toggle. Ebenso überlegen solltest, wie der Inhalt sich verhalten soll. Sprich neben und/oder untereinander. Dich also mit dem CSS Box-Model und Flexbox-Model beschäftigen solltest. Wenn du das mit Media Queries kombinierst, auf einem guten Weg bist. Ohne essentielles HTML und CSS Grundlagenwissen da nicht viel geht. Eigentlich sollten Frameworks nur genutzt werden, wenn man auch weiß und versteht, wie sie funktionieren und warum dieses oder jenes so oder so gelöst wurde. Dir aber mal Bootstrap, Skeleton oder ein anderes Framework/Grid-System anschauen solltest. 

LG medmonk 

Antwort bewerten Vielen Dank für Deine Bewertung
Kommentar von medmonk
24.11.2016, 00:38

So nebenbei auch dein Stylesheet ein Paar Fehler hat und an manchen Stellen gekürzt werden kann. Wenn du überwiegend die selbe Schrift verwendest, diese global zuweisen solltest und nur bei all jenen Elementen überschreibst, deren Schrift davon abweicht.

Ebenso dir zur kurzen Schreibweise rate. Du sparst dir einerseits einiges an Schreibarbeit und anderseits alles etwas übersichtlicher bleibt. font-family, font-size und line-height wie folgt zusammenfassen kannst. 

/* long */
selector {
 font-size: 22px;
 font-family: 'Oswald', sans-serif;
 line-height: 150%;
}
/* short */
selector {
 font: 22px/150% 'Oswald', sans-serif;

LG medmonk 

0

Der gewählte Ansatz ist einer von vielen möglichen. Grundsätzlich in Ordnung, weil alle Angaben für Breite und Höhe in % angegeben werden. Dass sich am Ende die einzelnen Bereiche dennoch überlappen, liegt am Font. Weil dieser fest vorgegeben ist, macht der Browser das zugrunde liegende Element mindestens so breit wie den umbrochenen Text. Abhilfe schafft wie bereits erwähnt das Stichwort "Media Queries" (googlen). Damit könnte man die Schriftgrösse schrittweise an den Viewport anpassen.

Allerdings bringt das auch nicht in allen Fällen die erwünschte Lösung, weil man nie weiss, wieviel Pixel eine Schrift in der Breite benötigt. Es kann dann sein, dass es abhängig vom Zielgerät und Zielbrowser bei bestimmten Grenzfällen wieder zu Überlappungen kommt.

Die Schriftgrösse würde ich noch in "em" angeben statt in "px", aber das Problem bleibt dasselbe.

Antwort bewerten Vielen Dank für Deine Bewertung

du legst besser gleich 2 css dateien an. eine für große, eine für kleine auflösung angepasst. und dann fügst du in den head-abschnitt...

link rel="stylesheet" media="all and (min-device-width: 900px)" href="workstation.css"

link rel="stylesheet" media="all and (max-device-width: 900px)" href="mobile.css"

aber die spitzen klammern nicht vergessen. die separate mobile.css gibt dir die möglichkeit, deine divs oder articles nicht nur unterschiedlich breit, sondern auch untereinander statt nebeneinander anzuordnen.

Antwort bewerten Vielen Dank für Deine Bewertung
Kommentar von medmonk
24.11.2016, 00:21

du legst besser gleich 2 css dateien an. eine für große, eine für kleine auflösung angepasst. und dann fügst du in den head-abschnitt...

Besser ist es nicht wirklich. Mobile ist ja nicht gleich mobil, da gibt es ja auch unterschiedlichste Geräte und Viewports. Ebenso es genügend Formatierungen gibt, die sowohl auf kleinen als auch auf großen Geräten verwendet werden. Man also wenigstens drei, eher bis fünf Stylesheets anlegen sollte.

- global.css
- mobile.css - phablet.css
- tablet.css - desktop.css

Statt für jedes Device ein eigenes CSS zu schreiben, man auch gleich eines verwenden kann und lediglich mit Hilfe der Media Queries einzelne Formatierungen überschreibt. Das spart einerseits unnötige Schreiberei und HTTP-Requests und bleibt im Ganzen übersichtlicher. 

/* -| Mobile-first queries |----- */ 

/* Global and mobile formatting */
* {attribut: value;}

/* Override for phablet */
@media (min-width: 34.375em) { }
/* Override for tablet */
@media (min-width: 46.875em) { }
/* Override for desktop */
@media (min-width: 62.500em) { }

Neben den Geräte-spezifischen Queries auch noch weitere Layout-bezogene Breakpoints hinzukommen können. z.B. für Elemente bei denen das Gruppieren mit oben genannten Queries nicht ausreicht. Diese jedoch hier mal außen vor lasse. 

LG medmonk 

0

Media Queries ist hier das Stichwort ich empfehle aber hielt liberalen direkt auf ein fontendframework zurück zu greifen Bootstrap eignet sich da hervorragend

Antwort bewerten Vielen Dank für Deine Bewertung

Was möchtest Du wissen?