Muestra las diferencias entre dos versiones de la página.
Ambos lados, revisión anterior Revisión previa Próxima revisión | Revisión previa | ||
clase:daw:diw:2eval:tema06 [2021/01/20 17:51] admin [Arquitectura responsiva] |
clase:daw:diw:2eval:tema06 [2025/02/16 22:18] (actual) admin [Cálculos en CSS] |
||
---|---|---|---|
Línea 26: | Línea 26: | ||
Mas información: | Mas información: | ||
* [[https:// | * [[https:// | ||
- | * [[https:// | + | * [[https:// |
* [[https:// | * [[https:// | ||
* [[https:// | * [[https:// | ||
Línea 68: | Línea 68: | ||
| | ||
| | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | * También se pueden usar decimales con '' | ||
+ | |||
+ | <sxh css> | ||
+ | .c-titulo { | ||
+ | font-size: 3.14vw; | ||
} | } | ||
</ | </ | ||
Línea 79: | Línea 87: | ||
} | } | ||
</ | </ | ||
+ | |||
+ | Otra forma de cambiar el '' | ||
+ | |||
+ | Veamos ahora como se usa '' | ||
+ | |||
+ | ^ Tamaño botón | ||
+ | | Normal | ||
+ | | Grande '' | ||
+ | | Pequeño '' | ||
+ | |||
+ | Vamos ahora los mismo datos pero en '' | ||
+ | |||
+ | ^ Tamaño botón | ||
+ | | Normal | ||
+ | | Grande '' | ||
+ | | Pequeño '' | ||
+ | |||
+ | Y por último veamos la relación que hay entre en padding y el tamaño de fuente en % | ||
+ | |||
+ | ^ Tamaño botón | ||
+ | | Normal | ||
+ | | Grande '' | ||
+ | | Pequeño '' | ||
+ | |||
+ | Resulta que no hay una relación constante entre el tamaño de la fuente y el tamaño del padding. | ||
+ | |||
+ | Es decir para un tamaño normal el padding horizontal es el 75% del tamaño de la fuente pero | ||
+ | en un botón grande (que el tamaño de fuente es más grande) el padding horizontal es el 80% del tamaño de la fuente | ||
+ | y para terminar en un botón pequeño el padding horizontal es el 57% del tamaño de la fuente. ¿No debería ser constante el tamaño del padding respecto del tamaño de fuente? Por lo tanto si aumentamos el tamaño de fuente en el navegador , los padding no deberían aumentar proporcionalmente sino como vemos que lo hace bootstrap. | ||
==== em ==== | ==== em ==== | ||
- | La unidad '' | + | La unidad '' |
<note tip>Mi recomendación es usar siempre '' | <note tip>Mi recomendación es usar siempre '' | ||
- | |||
Línea 155: | Línea 191: | ||
<sxh css> | <sxh css> | ||
.c-titulo { | .c-titulo { | ||
- | font-size: | + | font-size: calc( ( 1 / 3 ) * 100vw); |
} | } | ||
</ | </ | ||
+ | <sxh css> | ||
+ | .c-titulo { | ||
+ | font-size: clamp(40px, | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | |||
+ | |||
+ | <note tip> | ||
+ | <note important> | ||
+ | Es obligatorio separar siempre las operaciones de suma y resta con espacios en blanco de sus operandos. | ||
+ | |||
+ | Por ejemplo, la siguiente expresión no es correcta: | ||
+ | |||
+ | '' | ||
+ | |||
+ | debiendose corregir y quedando así: | ||
+ | |||
+ | '' | ||
+ | |||
+ | Aunque los operadores '' | ||
+ | </ | ||
Línea 166: | Línea 224: | ||
+ | ==== Calculo de valores con clamp ==== | ||
+ | La siguiente gráfica muestra como funciona '' | ||
+ | {{ : | ||
+ | |||
+ | Para calcular los tamaños de pantalla donde se producen los cambios (puntos rojos) las variable son las siguientes: | ||
+ | |||
+ | * $w_{lower}$: | ||
+ | * $w_{upper}$: | ||
+ | * $min_{value}$: | ||
+ | * $max_{value}$: | ||
+ | \\ | ||
+ | * $pendiente$: | ||
+ | * $coeficiente_{posición}$: | ||
+ | |||
+ | |||
+ | Pero, ¿como calculamos los valores de $pendiente$ y $coeficiente_{posición}$? | ||
+ | |||
+ | De forma genérica podemos establecer los valores de las 4 variables de la siguiente forma: | ||
+ | |||
+ | {{ : | ||
+ | |||
+ | Siendo los valores de $pendiente$ y $coeficiente_{posición}$ los siguientes: | ||
+ | |||
+ | $$ | ||
+ | pendiente=\frac {max_{value} - min_{value}}{w_{upper} - w_{lower}} \cdot 100 | ||
+ | \\ | ||
+ | coeficiente_{posición}=min_{value} - \frac{pendiente}{100} \cdot w_{lower} | ||
+ | $$ | ||
+ | |||
+ | Veamos el ejemplo en el que queremos que la propiedad '' | ||
+ | * $w_{lower}$: | ||
+ | * $w_{upper}$: | ||
+ | * $min_{value}$: | ||
+ | * $max_{value}$: | ||
+ | |||
+ | Entonces | ||
+ | |||
+ | $$ | ||
+ | pendiente=\frac {max_{value} - min_{value}}{w_{upper} - w_{lower}} \cdot 100=\frac {20-12}{600-230} \cdot 100=2, | ||
+ | \\ | ||
+ | coeficiente_{posición}=min_{value} - \frac{pendiente}{100} \cdot w_{lower}=12-\frac{2, | ||
+ | $$ | ||
+ | |||
+ | Por lo tanto el css será: | ||
+ | |||
+ | <sxh css> | ||
+ | .c-titulo { | ||
+ | font-size: clamp(12px, | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | |||
+ | En la primera figura | ||
+ | |||
+ | {{ : | ||
+ | |||
+ | cuyos valores eran: | ||
+ | * $w_{lower}$: | ||
+ | * $w_{upper}$: | ||
+ | * $min_{value}$: | ||
+ | * $max_{value}$: | ||
+ | |||
+ | Entonces | ||
+ | |||
+ | $$ | ||
+ | pendiente=\frac {max_{value} - min_{value}}{w_{upper} - w_{lower}}\cdot 100=\frac {400-200}{667-333} \cdot 100=59.88 | ||
+ | \\ | ||
+ | coeficiente_{posición}=min_{value} - \frac{pendiente}{100} \cdot w_{lower}=200-\frac{59.88}{100} \cdot 333=0.5989 | ||
+ | $$ | ||
+ | |||
+ | Por lo tanto el css será: | ||
+ | |||
+ | <sxh css> | ||
+ | .c-titulo { | ||
+ | font-size: clamp(200px, | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | |||
+ | * El código en python para crear los gráficos es el siguiente: | ||
+ | <sxh python> | ||
+ | import numpy as np | ||
+ | import matplotlib.pyplot as plt | ||
+ | from matplotlib.ticker import AutoLocator | ||
+ | |||
+ | min_value=200 | ||
+ | max_value=400 | ||
+ | pendiente=60 | ||
+ | coeficiente_posición=15 | ||
+ | |||
+ | def decore_axes(axes, | ||
+ | axes.set_title(title, | ||
+ | axes.set_xlabel(xlabel, | ||
+ | axes.set_ylabel(ylabel, | ||
+ | axes.set_xlim(xmin=0) | ||
+ | axes.grid(visible=True, | ||
+ | axes.set_axisbelow(True) | ||
+ | axes.yaxis.set_major_locator(AutoLocator()) | ||
+ | axes.set_facecolor('# | ||
+ | |||
+ | max_w_size=1200 | ||
+ | x=np.linspace(0, | ||
+ | y=[] | ||
+ | |||
+ | for xi in x: | ||
+ | yi=xi*(pendiente/ | ||
+ | if (yi< | ||
+ | yi=min_value | ||
+ | elif (yi> | ||
+ | yi=max_value | ||
+ | |||
+ | y.append(yi) | ||
+ | |||
+ | min_corte_x=((min_value-coeficiente_posición)*100)/ | ||
+ | max_corte_x=((max_value-coeficiente_posición)*100)/ | ||
+ | figure=plt.figure(figsize=(8, | ||
+ | axes = figure.add_subplot(1, | ||
+ | |||
+ | axes.plot(x, | ||
+ | axes.scatter(min_corte_x, | ||
+ | axes.scatter(max_corte_x, | ||
+ | |||
+ | decore_axes(axes, | ||
+ | |||
+ | _=axes.set_xticks( [0, | ||
+ | </ | ||
===== Imágenes ===== | ===== Imágenes ===== | ||
Hay muchas opciones al respecto de las imágenes responsivas. La técnica consiste principalmente en usar una imagen u otra en función de: | Hay muchas opciones al respecto de las imágenes responsivas. La técnica consiste principalmente en usar una imagen u otra en función de: | ||
Línea 231: | Línea 415: | ||
} | } | ||
+ | .c-table__head--width-1 { | ||
+ | width: 100px; | ||
+ | min-width: 100px; | ||
+ | } | ||
+ | .c-table__head--width-2 { | ||
+ | width: 150px; | ||
+ | min-width: 150px; | ||
+ | } | ||
+ | .c-table__head--width-3 { | ||
+ | width: 200px; | ||
+ | min-width: 200px; | ||
+ | } | ||
</ | </ | ||
</ | </ | ||
Línea 245: | Línea 440: | ||
<th class=" | <th class=" | ||
<th class=" | <th class=" | ||
- | <th class=" | + | <th class=" |
- | <th class=" | + | <th class=" |
</tr> | </tr> | ||
</ | </ | ||
Línea 387: | Línea 582: | ||
@media (min-width: 576px) { | @media (min-width: 576px) { | ||
- | .g--font-size-1\@movil { | + | .g--font-size-1\@tablet |
font-size: 40px; | font-size: 40px; | ||
} | } | ||
- | .g--font-size-2\@movil { | + | .g--font-size-2\@tablet |
font-size: 50px; | font-size: 50px; | ||
} | } | ||
- | .g--font-size-3\@movil { | + | .g--font-size-3\@tablet |
font-size: 55px; | font-size: 55px; | ||
} | } | ||
- | .g--font-size-4\@movil { | + | .g--font-size-4\@tablet |
font-size: 70px; | font-size: 70px; | ||
} | } | ||
Línea 402: | Línea 597: | ||
@media (min-width: 768px) { | @media (min-width: 768px) { | ||
- | .g--font-size-1\@tablet | + | .g--font-size-1\@desktop |
font-size: 40px; | font-size: 40px; | ||
} | } | ||
- | .g--font-size-2\@tablet | + | .g--font-size-2\@desktop |
font-size: 50px; | font-size: 50px; | ||
} | } | ||
- | .g--font-size-3\@tablet | + | .g--font-size-3\@desktop |
font-size: 55px; | font-size: 55px; | ||
} | } | ||
- | .g--font-size-4\@tablet | + | .g--font-size-4\@desktop |
font-size: 70px; | font-size: 70px; | ||
} | } | ||
Línea 417: | Línea 612: | ||
@media (min-width: 992px) { | @media (min-width: 992px) { | ||
- | .g--font-size-1\@desktop | + | .g--font-size-1\@fulldesktop |
font-size: 40px; | font-size: 40px; | ||
} | } | ||
- | .g--font-size-2\@desktop | + | .g--font-size-2\@fulldesktop |
font-size: 50px; | font-size: 50px; | ||
} | } | ||
- | .g--font-size-3\@desktop | + | .g--font-size-3\@fulldesktop |
font-size: 55px; | font-size: 55px; | ||
} | } | ||
- | .g--font-size-4\@desktop | + | .g--font-size-4\@fulldesktop |
font-size: 70px; | font-size: 70px; | ||
} | } | ||
Línea 433: | Línea 628: | ||
<sxh html> | <sxh html> | ||
- | <p class=" | + | <p class=" |
</ | </ | ||
En el ejemplo por defecto el tamaño de la fuente será de 40px pero en resoluciones mayores de 992px será de 55px. | En el ejemplo por defecto el tamaño de la fuente será de 40px pero en resoluciones mayores de 992px será de 55px. | ||
- | Lo que hacemos es crear todas los modificadores globales o modificadores de bloques para las distintas resoluciones pero añadiendo el sufijo '' | + | Lo que hacemos es crear todas los modificadores globales o modificadores de bloques para las distintas resoluciones pero añadiendo el sufijo |
Otro ejemplo de ello lo podemos ver en [[https:// | Otro ejemplo de ello lo podemos ver en [[https:// | ||
Línea 448: | Línea 643: | ||
* [[https:// | * [[https:// | ||
- | * [[https:// | + | * [[https:// |
Línea 471: | Línea 666: | ||
===== Menu responsivo ===== | ===== Menu responsivo ===== | ||
- | {{menu.zip|}} | + | {{..:1eval:menu.zip|}} |
<sxh html;title: HTML> | <sxh html;title: HTML> | ||
Línea 569: | Línea 764: | ||
^ ^ Interno | ^ ^ Interno | ||
- | ^ Fluido | + | ^ Fluido |
- | ^ Escalonado | + | ^ Escalonado |
Línea 577: | Línea 772: | ||
</ | </ | ||
- | * Interno/ | + | * Interno/ |
<sxh css> | <sxh css> | ||
Línea 589: | Línea 784: | ||
- | * Interno/ | + | * Interno/ |
<sxh css> | <sxh css> | ||
Línea 621: | Línea 816: | ||
</ | </ | ||
- | * Externo/ | + | * Externo/ |
<sxh html> | <sxh html> | ||
Línea 636: | Línea 831: | ||
* 1 div cuadrado azul de tamaño 400px | * 1 div cuadrado azul de tamaño 400px | ||
* 1 div cuadrado verde de tamaño 400px | * 1 div cuadrado verde de tamaño 400px | ||
- | * Dentro cada cuadrado azul , añade otro div de color rojo con tamaño | + | * Dentro cada cuadrado azul , añade otro div de color rojo con tamaño |
- | * Dentro cada cuadrado verde , añade otro div de color rojo con tamaño | + | * Dentro cada cuadrado verde , añade otro div de color rojo con tamaño |
Ahora: | Ahora: | ||
- | * Explica la diferencia de tamaños entre los de 10% y 10vw | + | * Explica la diferencia de tamaños entre los de 20% y 20vw |
* Ahora cambia el tamaño de la página y mira como de modifica el tamaño de los cuadrados. Indica cuales han cambiado de tamaño y explica porqué han cambiado de tamaño | * Ahora cambia el tamaño de la página y mira como de modifica el tamaño de los cuadrados. Indica cuales han cambiado de tamaño y explica porqué han cambiado de tamaño | ||
Línea 682: | Línea 877: | ||
==== Ejercicio 5 ==== | ==== Ejercicio 5 ==== | ||
- | Dado el típico layout de cabecera, menú lateral, cuerpo y pie. Haz una página HTML pero de forma que si el tamaño de la pantalla es menor que 500px no se vea el menú lateral. Deberás hacerlo usando BEM | + | Dado el típico layout de cabecera, menú lateral, cuerpo y pie. Haz una página HTML pero de forma que si el tamaño de la pantalla es menor que 500px no se vea el menú lateral. Deberás hacerlo usando BEM e externo. |
==== Ejercicio 6 ==== | ==== Ejercicio 6 ==== | ||
+ | Crea una clase css llamada '' | ||
+ | |||
+ | * Menos de 576px sea de color rojo | ||
+ | * Entre 576px y 768px sea de color verde | ||
+ | * Entre 768px y 992px sea de color azul | ||
+ | * Más de 992px sea de color naranja | ||
+ | |||
+ | Lo usarán en una página HTML donde estará un cuadrado de 200px x 200px | ||
+ | |||
+ | ==== Ejercicio 7 ==== | ||
+ | Crea las siguientes clases css: | ||
+ | |||
+ | <sxh css> | ||
+ | .g--bg-color-red { | ||
+ | background-color:# | ||
+ | } | ||
+ | .g--bg-color-green { | ||
+ | background-color:# | ||
+ | } | ||
+ | .g--bg-color-blue { | ||
+ | background-color:# | ||
+ | } | ||
+ | .g--bg-color-orange { | ||
+ | background-color:# | ||
+ | } | ||
+ | |||
+ | |||
+ | </ | ||
+ | |||
+ | Y modificalas con el sufijo " | ||
+ | |||
+ | ==== Ejercicio 8 ==== | ||
Crea modificadores globales para las siguientes propiedades CSS: | Crea modificadores globales para las siguientes propiedades CSS: | ||
* '' | * '' | ||
Línea 705: | Línea 931: | ||
* Que si la tabla no cabe, aparezcan las barras de scroll. | * Que si la tabla no cabe, aparezcan las barras de scroll. | ||
- | ==== Ejercicio | + | ==== Ejercicio |
Modifica el ejercicio anterior de forma que ahora los modificadores globales se puedan usar de forma responsiva con | Modifica el ejercicio anterior de forma que ahora los modificadores globales se puedan usar de forma responsiva con | ||
- | * @movil | ||
* @tablet | * @tablet | ||
* @desktop | * @desktop | ||
+ | * @fulldesktop | ||
Modifica el ejemplo de la tabla HTML de forma que las columnas ahora tenga siempre tamaños fijos (es decir no usar min o max), pero que cambien según la resolución de la pantalla. | Modifica el ejemplo de la tabla HTML de forma que las columnas ahora tenga siempre tamaños fijos (es decir no usar min o max), pero que cambien según la resolución de la pantalla. | ||
- | ==== Ejercicio | + | ==== Ejercicio |
Usando las clases de BEM y los modificadores globales que has ido usando durante el curso, añade de forma que ahora se puedan usar de forma responsiva con | Usando las clases de BEM y los modificadores globales que has ido usando durante el curso, añade de forma que ahora se puedan usar de forma responsiva con | ||
- | * @movil | ||
* @tablet | * @tablet | ||
* @desktop | * @desktop | ||
+ | * @fulldesktop | ||
- | ==== Ejercicio | + | ==== Ejercicio |
Modifica la página del tema anterior para hacerla responsiva de forma que según la resolución se cambie el tamaño : | Modifica la página del tema anterior para hacerla responsiva de forma que según la resolución se cambie el tamaño : | ||
* El tamaño de los títulos | * El tamaño de los títulos |