Para crear un diseño receptivo utilizando HTML y CSS, use cuadrículas con consultas de medios CSS. Puede crear un diseño receptivo utilizando diferentes clases para cada columna. Por ejemplo,
Vamos a crear un diseño receptivo de 12 columnas. Usaremos ‘%’ como la unidad de ancho de columna para crear columnas receptivas.
Dado que 12 es la columna más grande, ocupará todo el ancho disponible del contenedor, es decir, 100%
- ¿Cómo puedo perfeccionar mis habilidades de JavaScript (JQuery) sin invertir demasiado tiempo en diseño HTML y CSS?
- ¿AngularJS sería estable después de 5 años?
- ¿Qué es la pila tecnológica de Malwarebytes?
- Cómo insertar espacios en HTML
- ¿Qué programa se usa para codificar el correo electrónico?
Asi que,
ancho del número de columna 12 = (12/12) * 100 = 100%;
ancho del número de columna 11 = (11/12) * 100 = 91.666666%
ancho del número de columna 10 = (10/12) * 100 = 83.333333%
………
…… ..
ancho de la columna número 2 = (2/12) * 100 = 16.666667%
ancho de la columna número 1 = (1/12) * 100 = 08.333333%
Ahora CSS
.L-12,
.L-11,
.L-10,
.L-9,
.L-8,
.L-7,
.L-6,
.L-5,
.L-4,
.L-3,
.L-2,
.L-1 {
posición: relativa;
desbordamiento: oculto;
relleno-izquierda: 15px;
relleno derecho: 15px;
flotador izquierdo; / * Para permitir elementos de nivel de bloque dispuestos en una fila * /
}
/ * Ancho de cada columna * /
.L-1 {
ancho: 8.33333333%;
}
.L-2 {
ancho: 16.66666667%;
}
.L-3 {
ancho: 25%;
}
.L-4 {
ancho: 33.33333333%;
}
.L-5 {
ancho: 41.66666667%;
}
.L-6 {
ancho: 50%;
}
.L-7 {
ancho: 58.33333333%;
}
.L-8 {
ancho: 66.666666667%;
}
.L-9 {
ancho: 75%;
}
.L-10 {
ancho: 83.33333333%;
}
.L-11 {
ancho: 91.66666667%;
}
.L-12 {
ancho: 100%;
}
Puede agregar mucha más flexibilidad al usar más clases para diferentes dispositivos y al usar consultas de medios css.
Echa un vistazo a esto .
Gracias
