Wie kompatibel zu verschiedenen Auflösungen in HTML/CSS?

Question

Es gibt mehrere verschiedene Monitortypen, daher muss eine Webseite mit vielen verschiedenen Bildschirmauflösungen kompatibel sein. Wir verwenden heutzutage 4K-Monitore, aber die meisten Hintergrundbilder sind immer noch "nur" HD. Aber das ist nicht das einzige Problem, vor dem ich stehe. Das wichtigste ist, woher weißt du, was die Auflösung des aktuell verwendeten Monitors ist, mit HTML oder CSS? Wenn ich einen HD-Hintergrund für meine Seite einstelle und jemand einen 4K-Monitor benutzt, um meine Seite zu öffnen, sieht er/sie den Hintergrund meines Hintergrunds und daher einen leeren Teil der Webseite unter dem Hintergrundbild, was nicht sehr nett ist. Was sind die möglichen Lösungen für dieses Problem?

Answer 1

Ich denke, was Sie suchen, ist erreichbar durch CSS, über Medienabfragen. Dies erlaubt Ihnen, Ihren HTML-Code für verschiedene Bildschirmauflösungen zu formatieren. Die Syntax ist auch ziemlich einfach zu verstehen.

Eine der Möglichkeiten besteht darin, diese Medienabfragen in Ihrer CSS-Datei zu verwenden. Hier ist ein Beispiel unten.

/*This is for all screen types as you would guess*/ 
body{ 
    background-image: url('img/large-background.jgp'); 

/*This will target screens with max width of 768px i.e. tablets*/ 
@media (max-width: 768px) { 
    body { 
     background: url('img/less-large-background-for-devices.jpg'); 
    } 
} 

Auch bei these docs aussehen, sind sie sehr umfangreich und leicht zu verstehen. Sie werden Ihnen weitere Einzelheiten über diese und andere Möglichkeiten zum Targeting verschiedener Bildschirme mit CSS geben.