Plano de layout da página da web: layout de fluido elástico

Em outro artigo do meu artigo "Elastic + Layout de largura fixa", introduzi um plano de layout com elástico mais a largura fixa mínima e agora apresentarei outro plano de layout - layout de líquido elástico.

Essa solução é na verdade uma aplicação flexível desse layout. A maior vantagem do layout elástico é que ele pode fazer pleno uso do espaço da tela. Não importa o tamanho da resolução do cliente, ela pode se adaptar automaticamente às mudanças de largura.

Figura 1

Dê uma olhada na foto acima. Este é um site estrangeiro. É um layout de largura fixa. Nosso layout é baseado nesta imagem. Obviamente, não darei uma introdução abrangente de como fazer esta página completa, explicarei apenas os pontos -chave.

De fato, é relativamente simples fazer um layout elástico, mas, embora esse layout seja simples, a compreensão dos detalhes é a essência desse layout. Embora o layout elástico tenha vantagens tão boas, ele tem falhas relativamente fatais:

1. Se você não definir uma largura mínima para esse layout, ele terá um impacto fatal no layout quando o usuário encolher a janela para um suficientemente pequeno. Causa grave impacto no desalinhamento do layout.
2. Quando uma página é apresentada elasticamente, ela terá um enorme impacto nas fotos dentro. Porque até agora, o problema de escala de imagem com porcentagem não foi resolvido.

   Portanto, este artigo pode ter explicações relativamente menos sobre o layout e trata -se mais de resolver os dois problemas acima. Acredito que, desde que os dois problemas acima sejam resolvidos, esse layout será relativamente mais fácil.

Geralmente, os layouts elásticos usam porcentagens para definir a largura de um contêiner. Isso se adaptará automaticamente à largura da tela. No entanto, o valor da largura não pode ser completamente escalado pelo usuário. Devemos limitar sua largura mínima nessa largura percentual. Quando o usuário encolhra a janela para um determinado valor, a janela não será escalada novamente.

Amigos familiarizados com o CSS sabem que existem quatro atributos como este:

• Min-largura: largura mínima
• MAX-LUDA: Largura máxima
• Min-altura: altura mínima
• MAX-HEUTH: Altura máxima

Esses quatro atributos podem resolver esse problema. Você está feliz? Mas não esteja ocupado. Embora eles possam resolver esse problema, há um problema sério. O navegador IE6, que é o mais usado pelos usuários, não suporta esses atributos. Isso é uma coisa muito ruim. Não podemos descartar o navegador com mais usuários!

Existem quatro métodos populares na Internet para resolver o problema que o IE6 suporta esses quatro atributos:

1. Expressão no CSS para definir a largura mínima, que custa mais memória.
2. Use divs aninhados e, em seguida, use a imitação de deslocamento de margem para implementar, estrutura multi-redundante.
3. Implementado com o JQ Framework e a adição de uma estrutura JS a uma propriedade é um pouco não lucrativa.
4. Implementado com código JS puro.

Os três primeiros têm desvantagens, escolha o método mais adequado. Eu prefiro o último. Isso é conseguido por um grande estrangeiro. Você pode ver os exemplos relevantes aqui: http://www.doxdesk.com/software/js/minmax.html

Com este arquivo JS, você só precisa chamar esse arquivo JS no cabeçalho.

PS: Por conveniência no modelo de demonstração, eu chamo isso de JS de referência interna. No aplicativo real, você criará esse arquivo JS em um arquivo externo JS e o chamará da seguinte forma:

<script type = text/javascript src = minmax.js> </script>

Acabamos de aplicar a largura de min de dois contêineres #Wrapper e #Footer na folha de estilo e definimos sua largura para 100%, respectivamente. OK. Agora resolvemos o problema da largura mínima.