html - reducir - Ancho mínimo en el tamaño de la ventana

responsive design css ejemplos

Question

Tengo una página web con un diseño fluido con un 100% de ancho.

Cuando redimensiono la ventana del navegador, los elementos en la página se superponen.

Me gustaría crear un efecto similar a este sitio web http://bologna.bakeca.it/ que cuando la ventana es más pequeña que un ancho fijo, deje de cambiar el tamaño.

Answer 1

Bueno, prácticamente te diste la respuesta. En tu CSS dale al elemento que contiene un ancho mínimo. Si tienes que soportar IE6 puedes usar el truco de ancho mínimo:

#container {
    min-width:800px;
    width: auto !important;
    width:800px;
}

Eso le dará efectivamente un ancho mínimo de 800px en IE6 y cualquier navegador actualizado.

Answer 2

Puede establecer la propiedad de ancho mínimo de CSS para la etiqueta del cuerpo. Ya que esta propiedad no es compatible con IE6, puede escribir 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; */
}

O:

body{
   min-width:1000px; // Suppose you want minimum width of 1000px
   _width: expression( document.body.clientWidth > 1000 ? "1000px" : "auto" ); /* sets max-width for IE6 */
}