O design é ótimo, desta vez é realmente baseado no rascunho do projeto, porque agora qualquer máquina é uma máquina padrão de acordo com o rascunho do projeto! Colegas desenvolvedores, agora vocês podem simplesmente ler as anotações do rascunho de design diretamente!
Adaptação de telaA adaptação de tela deve referir-se à relação de adaptação entre a área de adaptação de conteúdo e o intervalo de tela.
A adaptação para tela única inclui conter, cobrir ou preencher, e a adaptação para múltiplas telas geralmente é baseada na largura.
conter e cobrir também precisam de posicionamento para lidar com espaços em branco e excesso de conteúdo.
Conteúdo diferente no mesmo H5 geralmente usa métodos de adaptação diferentes, ou seja, camadas.
CSS preferidoPara questões de desempenho como adaptação de tela, se puder ser implementado com css, deverá ser implementado com css.
Adaptação de camada inteiraPara garantir que os elementos de cada camada sejam dimensionados de forma síncrona e sem distorção, a área de adaptação de cada camada deve ser igual ao tamanho do rascunho do projeto.
A implementação direta consiste em construir um container com o mesmo tamanho da área de adaptação e adaptar toda a camada.
Podem existir vários elementos com o mesmo método de adaptação no container.
Tomemos como exemplo a implementação svg :
<!doctype html><html><body><style>.layer { posição: absoluto superior: 0; largura: 100%; -><svg class=layer viewBox=0 0 1080 1920 preserveAspectRatio=none> <!-- container--> <rect x=0 y=0 width=1080 height=1920 fill=rgba(96,96,96,.08)/> <!-- element--></svg><!-- contains center--><svg class=layer viewBox=0 0 1080 1920 preserveAspectRatio=xMidYMid meet> <!-- container--> <rect x=0 y=233 width=1080 height=1407 fill=#1565C0/> <!-- element--></svg><!-- contém bottom--><svg class=layer viewBox=0 0 1080 1920 preserveAspectRatio=xMidYMax meet> <!- - Contêiner--> <rect x=444 y=1779 largura=191 altura=39 fill=#1565C0/> <!-- Elemento--></svg></body></html>Efeito real:
Toda a adaptação da camada é simples de implementar e os valores do rascunho do design são lidos diretamente durante o desenvolvimento, o que pode atender às necessidades da maioria das páginas estáticas.
Mas quando há muitas animações h5, é preciso considerar a suavidade da animação e o desempenho da página.
Use elementos substituíveis como <img> <object> <svg> como contêineres e use imagens de fundo como elementos.
Existem falhas de desempenho ao aplicar animações CSS:
Para melhorar o desempenho dessas implementações, precisamos nos concentrar na animação do contêiner e reduzir o tamanho do contêiner. É melhor torná-lo igual à área total mínima de todos os elementos em uma camada para obter uma adaptação simplificada.
Adaptação simplificada fórmulaPara o processo de derivação, consulte Derivação da fórmula de adaptação de tela em camadas H5.
A largura do rascunho do projeto é v e a altura é g. A coordenada horizontal do elemento é x. A coordenada vertical é y. A altura é h. é x3 = m*u + (x - m*v)/w*w1 = m*v/w*w3 + (x - m*v)/w*w1 ordenada y4 = n*f + (y - n*g)/h*h1 = n*g/h*h3 + (y - n*g)/h*h1 largura w3 = (w/v)*u altura h3 = (h/g)*f quando contém Ao adaptar o método, o valor de escala s = Math.min(f/g, u/v) O espaço em branco horizontal esquerdo representa o espaço em branco total o = (m*v - x)/w O espaço em branco vertical representa o espaço em branco total p = ( n * g- y)/h Quando o modo de cobertura é adaptado, o valor de escala s = Math.max(f/g, u/v) O excesso horizontal esquerdo é responsável pelo excesso total o = (x - m*v)/w O excesso vertical o excesso é responsável pelo excesso total p = (y - n*g)/h Quando a área de adaptação está verticalmente no topo, m = 0. Quando está centralizada verticalmente, m = 0,5. m = 1. Quando está horizontalmente à esquerda, n = 0. Quando está centralizado horizontalmente, n = 0,5. Quando posicionado horizontalmente à direita, n = 1 comparado com toda a otimização da memória de adaptação da camada (w3*h3)/(v1*g1) >= w*h/(v*g)<img> exemplo de implementação
Quando a largura máxima é w/v e a altura máxima é h/g, corresponde à adaptação de contenção.
Quando a largura mínima é definida como w/v e a altura mínima é definida como h/g, isso corresponde à adaptação da cobertura.
Quando a largura é w/v e a altura é h/g, significa adaptação de preenchimento.
Durante a adaptação contida, se o tamanho original da imagem for menor que max-width e max-height, use zoom: 10 para ampliar ou modificar diretamente o tamanho original da imagem.
Durante a adaptação da capa, se o tamanho original da imagem for maior que a largura mínima e a altura mínima, use zoom: .1 para reduzir ou modificar diretamente o tamanho original da imagem.
Como a porcentagem no canto superior esquerdo é relativa à largura da tela u e à altura f, ela corresponde a m*u e n*f
Como a porcentagem na transformação é relativa à largura w1 e à altura h1 do elemento adaptado, ela corresponde a (m*v + x)/w*w1 e (n*f + y)/h*h1
<!doctype html><html><body><style>img { /* largura mínima e altura mínima constituem um contêiner virtual*/ largura mínima: 50.37037037037037% /* w3 = (w/v)*u onde; w = 544, v = 1080 */ altura mínima: 7,395833333333333% /* h3 = (h/g)*f onde h = 142, g = 1920 */ zoom: .1; /* y4 = n*f + (y - n*g)/h*h1 */ posição: esquerda absoluta: 50%; onde m = 0,5*/ topo: 50% /* n*f onde n = 0,5 */ transform: translateX(-48,34558823529412%) /* (x - m*v)/w*w1 onde x = 277, m = 0,5, v = 1080, w = 544 */ traduzY(378.8732394366197%) /* (y - n*g)/h*h1 onde y = 1498, n = 0,5, g = 1920, h = 142 */}</style><img src=http:/ /ui.qzone.com/544x142/> <!-- Elemento --></body></html> exemplo de implementação em segundo planobackground-size é contain ele corresponde à adaptação contida.background-size é cover corresponde à adaptação da cobertura.background-size é 100% 100% corresponde à `adaptação de preenchimento.background-position tem o mesmo p que o <!doctype html><html><body><style>div { posição: absoluto; largura: 50,37037037037037%; /* w3 = w/v*u onde w = 544, v = 1080 */ altura: 7,395833333333333%; * h3 = h/g*f onde h = 142, g = 1920 */ background: url(http://ui.qzone.com/544x142) no-repeat; /* Imagem de fundo como elemento*/ background-size: cover; você onde x = 277, v = 1080 */ topo: 78,02083333333333%; /* y3 = y/g*f onde y = 1498, g = 1920 */ posição de fundo-x: -48,34558823529412% /* o = (x - m*v)/w onde m = 0,5; , v = 1080, x = 277, w = 544*/ posição de fundo-y: 378,8732394366197%; /* p = (y - n*g)/h onde n = 0,5, g = 1920, y = 1498, h = 142*/}</style>< div></div> <!-- Container--></body></html>Exemplo de implementação <svg>
meetOrSlice de preserveAspectRatio é meet corresponde a conter adaptação.meetOrSlice de preserveAspectRatio é slice corresponde à adaptação da cobertura.preserveAspectRatio é none , corresponde à adaptação de preenchimento.meetOrSlice de preserveAspectRatio aqui é relativo ao contêiner, não a área de adaptação é usada para posicioná transform lo, e meetOrSlice de preserveAspectRatio é fixado em xMinYMin . <!doctype html><html><body><style>svg { posição: absoluto; largura: 50,37037037037037%; altura: 7,39583333333333% /* x4 = m*v/w*w3 + (x - m*v)/ w*w1 */ /* y4 = n*g/h*h3 + (y - n*g)/h*h1 */ topo: 0; esquerda: 0; transformar: traduzirX(99,26470588235294%) /* m*v/w*w3 onde m = 0,5, v = 1080, w = 544 */ traduzirY (676,056338028169%) /* n*g/h*h3 onde n = 0,5, g = 1920, h = 142 */ overflow: visível;} imagem svg { transform: translateX(-48.34558823529412%) /* (x - m*v)/w*w1 onde x = 277, m = 0,5, v = 1080 , w = 544 */ traduzirY(378,8732394366197%); /* (y - n*g)/h*h1 onde y = 1498, n = 0,5, g = 1920, h = 142 */}</style><svg viewBox=0 0 544 142 preserveAspectRatio=xMinYMin meet> <!-- Contêiner--> <largura da imagem=544 altura=142 xlink:href=http://ui.qzone.com/544x142/> <!-- Elemento --></svg></body></html> Ferramentas auxiliaresÉ problemático calcular porcentagens manualmente e escrever CSS. Você pode usar ferramentas como o Sass para ajudar a simplificá-lo.
A largura v e a altura g do rascunho do design são geralmente constantes no nível da página.
Basta ler a abscissa x , ordenada y , largura w e altura h de cada elemento no rascunho do projeto e então a ferramenta gera css.
Agora minha mãe não precisa mais se preocupar com meus problemas de restauração ou adaptação de tela.
processamento de texto O texto é fixo ou uma única linha não é fixa, a tag text svg pode lidar com isso
Se o texto for fixo ou uma única linha não for fixa, você também poderá converter o texto em imagens.
Várias linhas de texto não são fixas. Você pode usar foreignObject do svg para incorporar div
Comparação de planos
Existem muitas soluções de adaptação de tela. Qual método você deve escolher para obter uma adaptação de camada completa ou uma adaptação simplificada?
| plano | Zoom | posição | Zoom de texto | compatível |
|---|---|---|---|---|
| porcentagem de preenchimento superior | Só pode ser tolerante | ✓ | ✗ | ✓ |
| janela de visualização | ✓ | ✗ | ✓ | O suporte é complexo |
| ajuste ao objeto | ✓ | ✓ | ✗ | Móvel Android 4.4.4+ |
| svg preserveRatio | ✓ | ✓ | ✓ | Móvel Android 3.0+ |
| (máx/min)-(largura/altura) | ✓ | ✓ | texto fixo | ✓ |
| tamanho de fundo | ✓ | ✓ | Texto para imagem | ✓ |
O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.