Largura min em redimensionamento de janelas
-
25-09-2019 - |
Pergunta
Eu tenho uma página da web com um layout de fluido com uma largura de 100%.
Quando redimensionei a janela do navegador, os elementos na página se sobrepõem.
Eu criaria um efeito semelhante a este site http://bologna.bakeca.it/ que quando a janela é menor que uma parada de largura fixa redimensionando.
Solução
Você pode definir a propriedade Min-larguth do CSS para a etiqueta corporal. Como esta propriedade não é suportada pelo IE6, você pode escrever como:
body{
min-width:1000px; /* Suppose you want minimum width of 1000px */
width: auto !important; /* Firefox will set width as auto */
width:1000px; /* As IE6 ignores !important it will set width as 1000px; */
}
Ou:
body{
min-width:1000px; // Suppose you want minimum width of 1000px
_width: expression( document.body.clientWidth > 1000 ? "1000px" : "auto" ); /* sets max-width for IE6 */
}
Outras dicas
Bem, você praticamente se deu a resposta. No seu CSS, dão ao elemento contendo uma largura de min. Se você precisar suportar o IE6, pode usar o truque de largura de min:
#container {
min-width:800px;
width: auto !important;
width:800px;
}
Isso fornecerá efetivamente a você 800px de largura no IE6 e quaisquer navegadores atualizados.