Il existe plusieurs types de moniteurs différents. Par conséquent, une page Web doit être compatible avec de nombreuses résolutions d'écran différentes. Nous utilisons des moniteurs 4K de nos jours mais la plupart des images d'arrière-plan sont encore "seulement" HD. Mais ce n'est pas le seul problème auquel je suis confronté. Le plus important est, comment savez-vous quelle est la résolution du moniteur actuellement utilisé, en utilisant HTML ou CSS? Si je définis un fond HD pour ma page et que quelqu'un utilise un moniteur 4K pour ouvrir mon site, il verra le fond de mon fond et donc une partie vide de la page web sous l'image d'arrière-plan, ce qui n'est pas très agréable. Quelles sont les solutions possibles à ce problème?Comment être compatible avec différentes résolutions en HTML/CSS?
0
A
Répondre
0
Je pense que ce que vous cherchez est réalisable via css, via des requêtes média. Cela vous permet essentiellement de style votre code HTML pour différentes résolutions d'écran. la syntaxe est assez facile à comprendre aussi.
L'un des moyens consiste à utiliser ces requêtes de média dans votre fichier css. voici un exemple ci-dessous.
/*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');
}
}
Regardez aussi these docs, ils sont très complets et faciles à comprendre. Ils vous donneront plus de détails à ce sujet et d'autres façons de cibler différents écrans en utilisant css.