0Logo HTML5imagens de fundo sensível para sites

Eu estive recentemente atualizando meus sites e servidor web e adicionando um novo site (LoveCrete.org). Eu queria ter uma imagem de fundo em LoveCrete e percebeu que, claro, 1 tamanho não serve para todos os ecrãs. Aqui está um resumo do que o meu pensamento era eo que eu fiz para atender os tamanhos de tela numerosos e orientações.

que orientação

Comecei por fazer-me uma pequena mesa de todos as resoluções comuns usados ​​em PCs e tablets (na orientação horizontal). Decidi focar este porque a maioria das imagens estão disponíveis na paisagem de modo que este é um lugar sensível para começar.

Eu decidi que eu iria colocar imagens centralmente na página e deixar as bordas ser perdido fora da borda da tela em alguns casos. Quando um telefone é utilizado na orientação retrato ele irá carregar a imagem com base na altura (não largura) e vai perder um monte de ambos borda da imagem. Fazê-lo de outra maneira significaria a necessidade imagens cortadas de uma forma totalmente diferente ou ter uma imagem de paisagem “telha” em uma tela de altura, o que não é desejável.

As proporções da imagem de tamanho máximo para fazer em cada grupo foram todos em redor 1.6 com um um pouco maior poucos. Para manter as coisas simples, eu decidi usar uma proporção de 16:10 para todas as imagens e veio com tamanhos para fazer em conformidade.

Isto significa, na maioria dos casos, a imagem não será um ajuste perfeito para o tamanho da tela, mas todas as telas terá algo muito próximo e nenhuma tela vai acabar com algo muito pequeno. Significa, também, uma imagem de origem pode ser cortada para 16:10 uma vez e, em seguida, vários tamanhos facilmente criados

grupos de resolução de paisagem comum

AlturaLarguraImage to makeComentários
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×19201080p Full HD
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

Como você pode ver eu tenho agrupados algumas resoluções e, então, fazer 1 imagem que irá abranger todas as alturas até a maior altura nesse grupo. Vou certificar-se da imagem também é grande o suficiente para a largura máxima tal altura um pode ser emparelhado com em uma tela normal. Eu não ter tido em conta configurações incomuns como 21:9 monitores ou várias telas – tem de haver um limite em algum lugar!

Porque CSS usa o visor ou navegador tamanho e não as telas de paisagem tamanho da tela precisa usar largura em vez de altura – como na maioria dos sistemas de topo e perder espaço inferior de barras de título etc enquanto que a largura é geralmente maximizada. No entanto, para displays retrato é melhor usar a propriedade altura. Isto pode ser feito como CSS pode identificar a orientação da tela

o CSS usado, em seguida, tem a seguinte aparência

corpo{fundo de repetição: no-repeat; background-attachment: fixo; -fundo posição: centro; background-size: cobrir;}

@meios de comunicação (largura máxima: 768px) {corpo { imagem de fundo: url(bg480.jpg); }}
@meios de comunicação (min-width:769px) e (largura máxima: 1024px) {corpo { imagem de fundo: url(bg640.jpg); }}
@meios de comunicação (min-width:1025px) e (largura máxima: 1280px) {corpo { imagem de fundo: url(bg800.jpg); }}
@meios de comunicação (min-width:1281px) e (largura máxima: 1600px) {corpo { imagem de fundo: url(bg1000.jpg); }}
@meios de comunicação (min-width:1601px) e (largura máxima: 1920px) {corpo { imagem de fundo: url(bg1200.jpg); }}
@meios de comunicação (min-width:1921px) e (largura máxima: 2560px) {corpo { imagem de fundo: url(bg1600.jpg); }}
@meios de comunicação (min-width:2561px) {corpo { imagem de fundo: url(../images / bg2400.jpg); }}

@meios de comunicação (orientação: retrato){
@meios de comunicação (altura máxima: 480px) {corpo { imagem de fundo: url(bg480.jpg); }}
@meios de comunicação (min-altura:481px) e (altura máxima: 640px) {corpo { imagem de fundo: url(bg640.jpg); }}
@meios de comunicação (min-altura:641px) e (altura máxima: 800px) {corpo { imagem de fundo: url(bg800.jpg); }}
@meios de comunicação (min-altura:801px) e (altura máxima: 1000px) {corpo { imagem de fundo: url(bg1000.jpg); }}
@meios de comunicação (min-altura:1001px) e (altura máxima: 1200px) {corpo { imagem de fundo: url(bg1200.jpg); }}
@meios de comunicação (min-altura:1201px) e (altura máxima: 1600px) {corpo { imagem de fundo: url(bg1600.jpg); }}
@meios de comunicação (min-altura:1601px) {corpo { imagem de fundo: url(bg2400.jpg); }}
}

Por favor envie-nos a sua opinião comentando abaixo! Se você deseja se inscrever, use o link de inscrição no menu no canto superior direito. Você também pode compartilhar isso com seus amigos usando os links sociais abaixo. Felicidades.

Deixe uma resposta