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 Próxima revisión Ambos lados, revisión siguiente | ||
clase:daw:diw:2eval:tema06 [2021/01/11 14:19] admin [Imágenes] |
clase:daw:diw:2eval:tema06 [2024/01/09 10:10] admin [Unidades] |
||
---|---|---|---|
Línea 68: | Línea 68: | ||
| | ||
| | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | * También se pueden usar decimales con '' | ||
+ | |||
+ | <sxh css> | ||
+ | .c-titulo { | ||
+ | font-size: 3.14vw; | ||
} | } | ||
</ | </ | ||
Línea 82: | Línea 90: | ||
==== em ==== | ==== em ==== | ||
- | La unidad '' | + | La unidad '' |
Línea 155: | Línea 163: | ||
<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 '' | ||
+ | </ | ||
<sxh css> | <sxh css> | ||
<p class=" | <p class=" | ||
+ | </ | ||
+ | |||
+ | |||
+ | ==== 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$: | ||
+ | |||
+ | $$ | ||
+ | pendiente=60 | ||
+ | \\ | ||
+ | min=200 | ||
+ | \\ | ||
+ | max=400 | ||
+ | $$ | ||
+ | \\ | ||
+ | \\ | ||
+ | $$ | ||
+ | |||
+ | w_{lower} * \frac {pendiente}{100}=min_{value} | ||
+ | \\ | ||
+ | w_{lower} = \frac {min_{value}*100}{pendiente}= \frac {200*100}{60}=333px | ||
+ | $$ | ||
+ | |||
+ | \\ | ||
+ | \\ | ||
+ | $$ | ||
+ | w_{upper} * \frac {pendiente}{100}=max_{value} | ||
+ | \\ | ||
+ | w_{upper} = \frac {max_{value}*100}{pendiente}= \frac {400*100}{60}=667px | ||
+ | |||
+ | |||
+ | $$ | ||
+ | |||
+ | |||
+ | 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}}*100 | ||
+ | \\ | ||
+ | coeficiente_{posición}=min_{value} - \frac{pendiente}{100}*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}}=\frac {20-12}{600-230}*100=2, | ||
+ | \\ | ||
+ | coeficiente_{posición}=min_{value} - \frac{pendiente}{100}*w_{lower}=12-\frac{2, | ||
+ | $$ | ||
+ | |||
+ | Por lo tanto el css será: | ||
+ | |||
+ | <sxh css> | ||
+ | .c-titulo { | ||
+ | font-size: clamp(12px, | ||
+ | } | ||
</ | </ | ||
Línea 181: | Línea 287: | ||
* Pantallas grandes: | * Pantallas grandes: | ||
- | {{:clase: | + | {{:: |
* Pantallas medianas: | * Pantallas medianas: | ||
- | {{:clase: | + | {{:: |
* Pantallas pequeñas: | * Pantallas pequeñas: | ||
- | {{:clase: | + | {{:: |
<sxh html> | <sxh html> | ||
< | < | ||
- | <source media=" | + | <source media=" |
- | <source media=" | + | <source media=" |
- | <!-- img tag for browsers that do not support picture element --> | + | <img src="https:// |
- | <img src="images/kitten-small.png" alt="a cute kitten" /> | + | |
</ | </ | ||
</ | </ | ||
Línea 442: | Línea 547: | ||
Otro ejemplo de ello lo podemos ver en [[https:// | Otro ejemplo de ello lo podemos ver en [[https:// | ||
- | ===== Ejemplo de Menu responsivo ===== | ||
- | {{menu.zip|}} | + | También en Boostrap qu permite clases responsivas: |
+ | |||
+ | ===== Breakpoints ===== | ||
+ | Al crear la arquitectura responsiva es necesario indicar los pixeles de cada pantalla así como los tamaños. En los siguientes artículos se indica cuales se usan en diversos frameworks css. | ||
+ | |||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | |||
+ | |||
+ | * **Bootstrap** | ||
+ | |||
+ | ^ Nombre | ||
+ | | -- | ||
+ | | sm | ||
+ | | md | ||
+ | | lg | ||
+ | | xl | ||
+ | | xxl | ||
+ | |||
+ | * **Tailwind** | ||
+ | |||
+ | ^ Nombre | ||
+ | | sm | ||
+ | | md | ||
+ | | lg | ||
+ | | xl | ||
+ | |||
+ | ===== Menu responsivo ===== | ||
+ | |||
+ | {{..:1eval:menu.zip|}} | ||
<sxh html;title: HTML> | <sxh html;title: HTML> | ||
Línea 536: | Línea 669: | ||
} | } | ||
</ | </ | ||
+ | |||
+ | ===== Resumen técnicas responsivas ===== | ||
+ | Hemos visto varias formas de hacer las cosas responsivas. Veamos ahora una tabla en la que se explican las 4 formas posibles: | ||
+ | |||
+ | |||
+ | ^ ^ Interno | ||
+ | ^ Fluido | ||
+ | ^ Escalonado | ||
+ | |||
+ | |||
+ | <note tip> | ||
+ | El tipo **Externo/ | ||
+ | </ | ||
+ | |||
+ | * Interno/ | ||
+ | |||
+ | <sxh css> | ||
+ | .c-titulo { | ||
+ | font-size: 10vw | ||
+ | } | ||
+ | </ | ||
+ | <sxh html> | ||
+ | <h1 class=" | ||
+ | </ | ||
+ | |||
+ | |||
+ | * Interno/ | ||
+ | |||
+ | <sxh css> | ||
+ | .c-titulo { | ||
+ | font-size: 40px; | ||
+ | } | ||
+ | | ||
+ | @media (min-width: 768px) { | ||
+ | .c-titulo { | ||
+ | font-size: 55px; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | </ | ||
+ | <sxh html> | ||
+ | <h1 class=" | ||
+ | </ | ||
+ | |||
+ | * Externo/ | ||
+ | |||
+ | <sxh html> | ||
+ | < | ||
+ | <tr> | ||
+ | <th class=" | ||
+ | <th class=" | ||
+ | <th class=" | ||
+ | <th class=" | ||
+ | <th class=" | ||
+ | </tr> | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | * Externo/ | ||
+ | |||
+ | <sxh html> | ||
+ | <p class=" | ||
+ | </ | ||
+ | |||
===== Ejercicios ===== | ===== Ejercicios ===== | ||
Línea 545: | Línea 742: | ||
* 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 592: | Línea 789: | ||
==== 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 | ||
- | |||
==== Ejercicio 6 ==== | ==== Ejercicio 6 ==== | ||
+ | Crea una clase css llamada '' | ||
+ | |||
+ | * Menos de 500px sea de color rojo | ||
+ | * Entre 500px y 750px sea de color verde | ||
+ | * Entre 750px y 1000px sea de color azul | ||
+ | * Más de 1000px 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 614: | Línea 842: | ||
* 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 | * @movil | ||
Línea 623: | Línea 851: | ||
- | ==== 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 | * @movil | ||
Línea 630: | Línea 858: | ||
- | ==== 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 |