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
| Altura | Largura | Image to make | Comentários | ||
|---|---|---|---|---|---|
| 4:3 | 16:10 | 16:9 | |||
| 2160 | 2880 | 3840 | 2400×3840 | 4k UHD | |
| 1600 1536 1440 | – 2048 1920 | 2560 – – | – – 2560 | 1600×2560 | |
| 1200 1080 1050 | 1600 1440 1400 | 1920 – 1680 | – 1920 – | 1200×1920 | 1080p Full HD |
| 960 900 | 1280 1200 | 1536 1440 | – 1600 | 1000×1600 | |
| 800 768 720 | – 1024 960 | 1280 – – | – – 1280 | 800×1280 | 720p |
| 600 576 | 800 768 | 960 – | – 1024 | 640×1024 | |
| 480 | 640 | 768 | 480×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.
ripp2003 em Remova qualquer dispositivo do assistente de casa: “Obrigado ! funciona para mim ! no debian, use /usr/share/hassio/homeassistant/.storage Eu deletei com sucesso 7 aparelhos antigos guardados…”
Deixe uma resposta