En otro artículo en mi artículo "Elástico + diseño de ancho fijo", introduje un plan de diseño con elastic más el ancho mínimo fijo, y ahora presentaré otro plan de diseño: diseño de fluido elástico.
Esa solución es en realidad una aplicación flexible de este diseño. La mayor ventaja del diseño elástico es que puede hacer un uso completo del espacio en la pantalla. No importa cuán grande sea la resolución del cliente, puede adaptarse automáticamente a los cambios en el ancho.
Imagen 1
Echa un vistazo a la imagen de arriba. Este es un sitio web extranjero. Es un diseño de ancho fijo. Nuestro diseño se basa en esta imagen. Por supuesto, no daré una introducción completa sobre cómo hacer esta página completa, solo lo explicaré a los puntos clave.
De hecho, es relativamente simple hacer un diseño elástico, pero aunque este diseño es simple, la comprensión de los detalles es la esencia de este diseño. Aunque el diseño elástico tiene ventajas tan buenas, tiene defectos relativamente fatales:
Por lo tanto, este artículo puede tener relativamente menos explicaciones sobre el diseño, y se trata más de resolver los dos problemas anteriores. Creo que mientras se resuelvan los dos problemas anteriores, este diseño será relativamente más fácil.
En general, los diseños elásticos usan porcentajes para establecer el ancho de un contenedor. Esto se adaptará automáticamente al ancho de la pantalla. Sin embargo, el valor de ancho no puede escalar completamente libremente por el usuario. Debemos limitar su ancho mínimo en este ancho porcentual. Cuando el usuario encoge la ventana a un cierto valor, la ventana no volverá a escalar.
Los amigos que están familiarizados con CSS saben que hay cuatro atributos como este:
Estos cuatro atributos solo pueden resolver este problema. ¿Estás feliz? Pero no estés ocupado. Aunque pueden resolver este problema, hay un problema grave. El navegador IE6, que es el más utilizado por los usuarios, no admite estos atributos. Esto es algo muy malo. ¡No podemos descartar el navegador con la mayoría de los usuarios!
Hay cuatro métodos populares en Internet para resolver el problema que IE6 admite estos cuatro atributos:
Los tres primeros tienen desventajas, elija el método más adecuado. Prefiero el último. Esto lo logran un gran extranjero. Puede ver los ejemplos relevantes aquí: http://www.doxdesk.com/software/js/minmax.html
Con este archivo JS, solo necesita llamar a este archivo JS en el encabezado.
PD: Para mayor comodidad en el modelo de demostración, llamo a esto JS como una referencia interna. En la aplicación real, creará este archivo JS en un archivo externo JS y lo llamará de la siguiente manera:
<script type = text/javaScript src = minmax.js> </script>
Simplemente aplicamos Min-Width a los dos contenedores #Wrapper y #footer en la hoja de estilo, y establecemos su ancho en 100% respectivamente. DE ACUERDO. Ahora hemos resuelto el problema del ancho mínimo.