0Logo HTML5images de fond sensibles pour les sites Web

J'ai récemment été mise à jour mon site Web et le serveur Web et l'ajout d'un nouveau site (LoveCrete.org). Je voulais avoir une image de fond sur LoveCrete et réalisé que bien sûr 1 ne convient pas à tous les écrans. Voici un résumé de ce que ma pensée était et ce que je faisais pour répondre aux nombreuses tailles d'écran et orientations.

Quelle orientation

J'ai commencé par me faire une petite table de toutes les résolutions communes utilisées sur PC et les tablettes (dans une orientation horizontale). J'ai décidé de se concentrer sur cela parce que la plupart des images sont disponibles dans le paysage si c'est un endroit judicieux de commencer.

J'ai décidé que je mettrais des images au centre de la page et laisser les bords se perdre le bord de l'écran, dans certains cas. Quand un téléphone est utilisé en orientation portrait, il chargera l'image en fonction de la hauteur (pas de largeur) et va perdre beaucoup à la fois bord de l'image. il faire d'une autre façon signifierait images besoin recadrées à une forme totalement différente ou ayant une image de paysage “tuile” sur un écran grand, qui est pas souhaitable.

Les rapports de l'image de taille maximale à faire dans chaque groupe étaient tout autour 1.6 avec quelques un peu plus. Pour garder les choses simples, j'ai décidé d'utiliser un rapport de 16:10 pour toutes les images et est venu avec des tailles pour faire en conséquence.

Ce moyen dans la plupart des cas, l'image ne sera pas un ajustement parfait à la taille de l'écran, mais tous les écrans auront quelque chose de très proche et pas d'écran vont se retrouver avec quelque chose de trop petite. Cela signifie aussi une image source peut être recadrée 16:10 une fois, puis plusieurs tailles facilement créés

groupes de résolution de paysage commun

la tailleLargeurImage pourcommentaires
4:316:1016:9
2160288038402400×38404k UHD
1600
1536
1440

2048
1920
2560



2560
1600×2560
1200
1080
1050
1600
1440
1400
1920

1680

1920
1200×1920Full HD 1080p
960
900
1280
1200
1536
1440

1600
1000×1600
800
768
720

1024
960
1280



1280
800×1280720p
600
576
800
768
960

1024
640×1024
480640768480×768

Comme vous pouvez le voir, j'ai regroupé un bon nombre de résolutions et ferai ensuite 1 image qui couvrira toutes les hauteurs jusqu'à la plus grande hauteur de ce groupe. Je veillerai à l'image est également assez large pour la largeur maximale de la hauteur d'un tel pourrait être jumelé à un écran normal. Je n'ai pas tenu compte des configurations inhabituelles comme 21:9 moniteurs ou écrans multiples – il doit y avoir quelque part une limite!

Car CSS utilise la fenêtre ou la taille navigateur et non la taille de l'écran des écrans de paysage doivent utiliser la largeur plutôt que la hauteur – comme sur la plupart des systèmes haut et bas en l'espace lose des barres de titre etc tandis que la largeur est généralement maximisée. toutefois, pour le portrait affiche il est préférable d'utiliser la propriété de la hauteur. Cela peut se faire en CSS permet d'identifier l'orientation de l'écran

le CSS utilisé semble alors comme suit

corps{Répétition du fond: no-repeat; background-attachment: fixé; Position d'arrière-plan: centre; background-size: couverture;}

@médias (largeur maximale: 768px) {corps { image de fond: URL(bg480.jpg); }}
@médias (min-width:769px) et (largeur maximale: 1024px) {corps { image de fond: URL(bg640.jpg); }}
@médias (min-width:1025px) et (largeur maximale: 1280px) {corps { image de fond: URL(bg800.jpg); }}
@médias (min-width:1281px) et (largeur maximale: 1600px) {corps { image de fond: URL(bg1000.jpg); }}
@médias (min-width:1601px) et (largeur maximale: 1920px) {corps { image de fond: URL(bg1200.jpg); }}
@médias (min-width:1921px) et (largeur maximale: 2560px) {corps { image de fond: URL(bg1600.jpg); }}
@médias (min-width:2561px) {corps { image de fond: URL(../images / bg2400.jpg); }}

@médias (orientation: portrait){
@médias (hauteur maximum: 480px) {corps { image de fond: URL(bg480.jpg); }}
@médias (min-height:481px) et (hauteur maximum: 640px) {corps { image de fond: URL(bg640.jpg); }}
@médias (min-height:641px) et (hauteur maximum: 800px) {corps { image de fond: URL(bg800.jpg); }}
@médias (min-height:801px) et (hauteur maximum: 1000px) {corps { image de fond: URL(bg1000.jpg); }}
@médias (min-height:1001px) et (hauteur maximum: 1200px) {corps { image de fond: URL(bg1200.jpg); }}
@médias (min-height:1201px) et (hauteur maximum: 1600px) {corps { image de fond: URL(bg1600.jpg); }}
@médias (min-height:1601px) {corps { image de fond: URL(bg2400.jpg); }}
}

S'il vous plaît envoyez-nous vos pensées en commentant ci-dessous! Si vous souhaitez vous abonner s'il vous plaît utiliser le lien d'abonnement dans le menu en haut à droite. Vous pouvez également partager avec vos amis en utilisant les liens sociaux ci-dessous. À votre santé.

Laisser un commentaire