O que é um layout líquido?
https://stackoverflow.com/questions/62334
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Meu designer continua jogando fora o termo layout “líquido”.O que isto significa?
Obrigado pelo esclarecimento, sempre chamei isso de layout percentual e pensei que ele estava dizendo que as peças poderiam ser movimentadas, e isso era líquido
Solução
Um layout "líquido" é um layout de site que se expande para preencher toda a área disponível conforme a janela do navegador é redimensionada.Normalmente isso é feito usando CSS.Layouts líquidos podem ser bastante úteis para certos tipos de sites, mas também tendem a exigir muito mais esforço do que layouts de largura fixa, e sua utilidade depende do conteúdo do site e de quão bem implementados eles são.
Outras dicas
De http://www.maxdesign.com.au/presentation/liquid/ :
Todos os contêineres da página têm suas larguras definidas em porcentagens - o que significa que eles são completamente baseados na viewport e não no bloco inicial contendo.Um layout líquido se desloca para dentro e para fora quando você redimensionar a janela do navegador.
Basicamente, é um layout de uma página da web que não depende de especificações de largura específicas para os elementos da página.
Veja a discussão em Wikipédia.
Significa um layout que se ajusta dinamicamente à largura e altura do navegador (ou de qualquer cliente), para fazer uso eficiente de todo o espaço disponível na tela, em oposição a (principalmente) layouts de largura fixa que são feitos para se ajustar a uma resolução de denominador comum naquele particular. tempo (ex.800x600 costumava ser a norma para sites há muitos anos).
Liquid Layouts referem-se ao conceito de design de um site.Um layout líquido entrará e sairá quando você redimensionar a janela do navegador, devido às porcentagens e larguras relativas no CSS.
Significa apenas que ele se contrairá/expandirá para preencher o tamanho da janela do navegador (geralmente a largura), até certo ponto, se as coisas forem bem feitas.Caso contrário, o texto pode ficar bastante difícil de ler em monitores grandes (24"+).
Um de dois:
O design será dimensionado de acordo com a largura do navegador (por exemplo, se o navegador tiver 1024px de largura, o design também será)...embora isso seja bastante divertido ao projetar para navegadores de 100px de largura (às vezes os designers definem uma largura mínima).
O desenho tem largura fixa, mas é definido em uma medida usando um tamanho relativo...por exemplo "em"...portanto, à medida que o tamanho da fonte aumenta, a largura da página aumenta.
Um layout líquido é um método de layout CSS que define todas as larguras em porcentagens, de forma que as áreas da página aumentem/diminuam quando a janela de visualização (janela do navegador) for redimensionada.
Eles são muito úteis ao tentar criar um site que caiba em telas grandes e pequenas.Eles são um pouco mais difíceis de trabalhar do que layouts fixos, porque você está abrindo mão de algum nível de controle sobre como tudo cabe na página e precisa prestar muita atenção ao seu conteúdo, para garantir que ele não caia. além esteticamente no redimensionamento.
Eu diria que os layouts líquidos são mais úteis para sites com muito texto e com um layout de colunas bastante básico.Você também pode encontrar um meio termo com um layout “elástico” – um que tenha áreas líquidas e fixas.
Em um verdadeiro layout Liquid, seu conteúdo se expande e contrai para caber na janela do navegador do usuário de maneira significativa, calculada e inteligente.Portanto, é mais do que apenas definir as larguras das colunas e dos contêineres como porcentagens.
Bem feito, isso pode resultar em um aumento na qualidade percebida.Feito mal, é um pesadelo de usabilidade.
Tornar-se líquido é uma grande dor de cabeça.A dor vale a pena se o(s) tópico/cliente/produto(s) para o qual você está construindo o site tiver uma forte qualidade visual (pense em um site de filme de grande sucesso de verão), exigir um certo ajuste e acabamento ou se precisar ser exibido grandes pedaços de dados.
Observação:Atualizarei isso um pouco mais tarde com links para bons exemplos e citações para minhas afirmações
