Herramientas de usuario
clase:daw:diw:2eval:tema06
Diferencias
Muestra las diferencias entre dos versiones de la página.
| Ambos lados, revisión anterior Revisión previa | |||
|
clase:daw:diw:2eval:tema06 [2024/01/09 19:40] admin [Cálculos en CSS] |
clase:daw:diw:2eval:tema06 [2024/02/22 12:13] (actual) admin |
||
|---|---|---|---|
| Línea 539: | Línea 539: | ||
| @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 554: | Línea 554: | ||
| @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 569: | Línea 569: | ||
| @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 585: | Línea 585: | ||
| <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 773: | Línea 773: | ||
| </ | </ | ||
| - | * Externo/ | + | * Externo/ |
| <sxh html> | <sxh html> | ||
| Línea 866: | Línea 866: | ||
| </ | </ | ||
| - | Y modificalas con el sufijo "@movil", "@tabled" y "@desktop" y repite el ejercicio anterior pero en vez de usar la clase '' | + | Y modificalas con el sufijo "@tabled", "@desktop" y "@fulldesktop" y repite el ejercicio anterior pero en vez de usar la clase '' |
| ==== Ejercicio 8 ==== | ==== Ejercicio 8 ==== | ||
| Línea 890: | Línea 890: | ||
| ==== Ejercicio 9 ==== | ==== Ejercicio 9 ==== | ||
| 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. | ||
| Línea 899: | Línea 899: | ||
| ==== Ejercicio 10 ==== | ==== Ejercicio 10 ==== | ||
| 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 | ||
clase/daw/diw/2eval/tema06.1704825637.txt.gz · Última modificación: 2024/01/09 19:40 por admin
Herramientas de la página
Excepto donde se indique lo contrario, el contenido de este wiki esta bajo la siguiente licencia: GNU Free Documentation License 1.3
