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/05 14:52] admin [Cálculos en CSS] |
clase:daw:diw:2eval:tema06 [2023/01/18 09:47] admin [Ejercicios] |
||
---|---|---|---|
Línea 2: | Línea 2: | ||
En anteriores temas hemos visto como con '' | En anteriores temas hemos visto como con '' | ||
+ | |||
+ | Mas información: | ||
+ | * [[https:// | ||
====== Responsivo vs Adaptativo ====== | ====== Responsivo vs Adaptativo ====== | ||
Hacer un diseño responsivo es que la misma página se adapte a distintos tamaños de pantalla. Hacer un diseño adaptativo es hacer páginas distintas según el tamaño de la pantalla. | Hacer un diseño responsivo es que la misma página se adapte a distintos tamaños de pantalla. Hacer un diseño adaptativo es hacer páginas distintas según el tamaño de la pantalla. | ||
Línea 79: | Línea 82: | ||
==== em ==== | ==== em ==== | ||
- | La unidad '' | + | La unidad '' |
Línea 124: | Línea 127: | ||
En el ejemplo el tamaño mínimo de la fuente nunca será menor que 40px por mucho que se haga pequeña la ventana. | En el ejemplo el tamaño mínimo de la fuente nunca será menor que 40px por mucho que se haga pequeña la ventana. | ||
- | ==== camp() ==== | + | ==== clamp() ==== |
Retorna un valor pero sin ser menos que un mínimo ni mayor que un máximo | Retorna un valor pero sin ser menos que un mínimo ni mayor que un máximo | ||
Línea 165: | Línea 168: | ||
===== Imágenes ===== | ===== Imágenes ===== | ||
- | En el siguiente enlace: [[https:// | + | Hay muchas opciones al respecto de las imágenes |
+ | * Ancho o alto del dispositivo | ||
+ | * Pixel-ratio del dispositivo | ||
+ | * Tipos soportados por el navegador. | ||
+ | Una explicación completa la puedes ver en el siguiente enlace: [[https:// | ||
+ | |||
+ | Aquí solo vamos a ver como carga una imagen u otra en función del ancho del dispositivo. | ||
+ | |||
+ | Veamos un ejemplo: Según la resolución , no queremos cargar siempre la misma imagen sino que cambiamos la perspectiva de la foto ya que tenemos menos //sitio//. | ||
+ | |||
+ | * Pantallas grandes: | ||
+ | {{:: | ||
+ | |||
+ | |||
+ | * Pantallas medianas: | ||
+ | {{:: | ||
+ | |||
+ | |||
+ | * Pantallas pequeñas: | ||
+ | {{:: | ||
+ | |||
+ | <sxh html> | ||
+ | < | ||
+ | <source media=" | ||
+ | <source media=" | ||
+ | <img src=" | ||
+ | </ | ||
+ | </ | ||
===== Tablas ===== | ===== Tablas ===== | ||
Para hacer tablas responsivas, | Para hacer tablas responsivas, | ||
Línea 411: | Línea 441: | ||
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 505: | Línea 563: | ||
} | } | ||
</ | </ | ||
+ | |||
+ | ===== 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 514: | Línea 636: | ||
* 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 | + | * Dentro cada cuadrado |
- | * Dentro cada cuadrado | + | * Dentro cada cuadrado |
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 527: | Línea 649: | ||
* Rojo | * Rojo | ||
* Verde | * Verde | ||
- | * Azul | + | * Azul (Que tenga Tamaño de fuente 20px) |
De forma que: | De forma que: | ||
- | * El cuadrado Rojo expreses | + | * Que el cuadrado Rojo se indique |
- | * El cuadrado Verde expreses | + | * Que el cuadrado Verde se indique |
- | * El cuadrado Azul expreses | + | * Que el cuadrado Azul se indique |
+ | |||
+ | Añade ahora el siguiente CSS: | ||
+ | <sxh css> | ||
+ | html { | ||
+ | font-size: | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | Y comprueba que solo se ha modificado el tamaño del cuadrado Verde. | ||
==== Ejercicio 3 ==== | ==== Ejercicio 3 ==== | ||
Línea 541: | Línea 673: | ||
* Un div cuadrado de color rosa de forma que su tamaño siempre sea la mitad de la pantalla mas 20px | * Un div cuadrado de color rosa de forma que su tamaño siempre sea la mitad de la pantalla mas 20px | ||
* Un div cuadrado de color amarillo de forma que su tamaño siempre sea la mitad de la pantalla mas 20px pero no pueda ser menor que 100px ni mayor que 600px | * Un div cuadrado de color amarillo de forma que su tamaño siempre sea la mitad de la pantalla mas 20px pero no pueda ser menor que 100px ni mayor que 600px | ||
+ | |||
==== Ejercicio 4 ==== | ==== Ejercicio 4 ==== | ||
- | Crea una clase de BEM que sirva para hacer tablas. Se deberá permitir | + | Haz una página HTML de forma que se cargue una imagen distinta según el siguiente ancho de la pantalla: |
- | * Que las columnas como mínimo puedan tener algunos | + | * menos de 500px |
- | * Que las columnas como máximo puedan tener algunos | + | * entre 500px y 1000px |
- | * Que si no caben las columnas que aparezca una barra de scroll. | + | * mas de 1000px |
- | * La tabla tendrá alrededor un borde y un sombreado | + | |
- | * Las cabeceras de la tabla serán | + | |
==== Ejercicio 5 ==== | ==== Ejercicio 5 ==== | ||
Línea 554: | Línea 685: | ||
==== 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 | ||
- | ==== Ejercicio | + | Lo usarán en una página HTML donde estará un cuadrado de 200px x 200px |
+ | |||
+ | ==== Ejercicio | ||
+ | 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: | ||
+ | * '' | ||
+ | * '' | ||
+ | * '' | ||
+ | |||
+ | Los posibles valores de cada uno de ellos serán: 100px, 150px , 200px, 250px, 300px, 350px, 400px, 450px, 500px, 550px, 600px | ||
+ | |||
+ | Crea también otro modificador global para '' | ||
+ | |||
+ | Crea una clase BEM para tablas HTML de forma que: | ||
+ | * La tabla tendrá alrededor un borde y un sombreado | ||
+ | * Las cabeceras de la tabla serán de otro color. | ||
+ | |||
+ | Con todo los anterior, haz una página HTML con una tabla en la que: | ||
+ | * Haya columnas que tengan un ancho mínimo y otro máximo | ||
+ | * Haya columnas que tengan un ancho fijo | ||
+ | * Haya una columna que tengan un ancho mínimo | ||
+ | * Que si la tabla no cabe, aparezcan las barras de scroll. | ||
+ | |||
+ | ==== Ejercicio 9 ==== | ||
+ | Modifica el ejercicio anterior de forma que ahora los modificadores globales se puedan usar de forma responsiva con | ||
+ | * @movil | ||
+ | * @tablet | ||
+ | * @desktop | ||
+ | |||
+ | 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 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 | ||
+ | * @movil | ||
+ | * @tablet | ||
+ | * @desktop | ||
+ | |||
+ | |||
+ | ==== Ejercicio 11 ==== | ||
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 | ||
- | * Los menús sean responsivos. | ||
- | * Se oculte el banner en tamaño pequeños. | ||
* Los padding | * Los padding | ||
* Los margins | * Los margins | ||
+ | * Los menús sean responsivos. Es decir que cuando la pantalla es pequeña, se muestre la " | ||
+ | * Se oculten imágenes en tamaños pequeños. | ||