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 Próxima revisión | Revisión previa | ||
|
clase:daw:diw:2eval:tema06 [2025/01/20 10:21] admin [Tablas] |
clase:daw:diw:2eval:tema06 [2025/02/16 22:18] (actual) admin [Cálculos en CSS] |
||
|---|---|---|---|
| Línea 225: | Línea 225: | ||
| ==== Calculo de valores con clamp ==== | ==== Calculo de valores con clamp ==== | ||
| - | La siguiente gráfica muestra como funciona '' | + | La siguiente gráfica muestra como funciona '' |
| {{ : | {{ : | ||
| Línea 231: | Línea 231: | ||
| Para calcular los tamaños de pantalla donde se producen los cambios (puntos rojos) las variable son las siguientes: | Para calcular los tamaños de pantalla donde se producen los cambios (puntos rojos) las variable son las siguientes: | ||
| - | * wlower: | + | * wlower: |
| - | * wupper: | + | * wupper: |
| - | * minvalue: | + | * minvalue: |
| - | * maxvalue: | + | * maxvalue: |
| \\ | \\ | ||
| - | * pendiente: | + | * pendiente: |
| + | * coeficienteposición: | ||
| - | $$ | ||
| - | 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 | ||
| - | |||
| - | |||
| - | $$ | ||
| + | Pero, ¿como calculamos los valores de pendiente y coeficienteposición? | ||
| De forma genérica podemos establecer los valores de las 4 variables de la siguiente forma: | De forma genérica podemos establecer los valores de las 4 variables de la siguiente forma: | ||
| Línea 272: | Línea 249: | ||
| $$ | $$ | ||
| - | pendiente=\frac {max_{value} - min_{value}}{w_{upper} - w_{lower}}*100 | + | pendiente=\frac {max_{value} - min_{value}}{w_{upper} - w_{lower}} |
| \\ | \\ | ||
| - | coeficiente_{posición}=min_{value} - \frac{pendiente}{100}*w_{lower} | + | coeficiente_{posición}=min_{value} - \frac{pendiente}{100} |
| $$ | $$ | ||
| Línea 286: | Línea 263: | ||
| $$ | $$ | ||
| - | pendiente=\frac {max_{value} - min_{value}}{w_{upper} - w_{lower}}=\frac {20-12}{600-230}*100=2, | + | pendiente=\frac {max_{value} - min_{value}}{w_{upper} - w_{lower}} |
| \\ | \\ | ||
| - | coeficiente_{posición}=min_{value} - \frac{pendiente}{100}*w_{lower}=12-\frac{2, | + | coeficiente_{posición}=min_{value} - \frac{pendiente}{100} |
| $$ | $$ | ||
| Línea 296: | Línea 273: | ||
| .c-titulo { | .c-titulo { | ||
| font-size: clamp(12px, | font-size: clamp(12px, | ||
| + | } | ||
| + | </ | ||
| + | |||
| + | |||
| + | En la primera figura | ||
| + | |||
| + | {{ : | ||
| + | |||
| + | cuyos valores eran: | ||
| + | * wlower: | ||
| + | * wupper: | ||
| + | * minvalue: | ||
| + | * maxvalue: | ||
| + | |||
| + | 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, | ||
| } | } | ||
| </ | </ | ||
| Línea 768: | Línea 772: | ||
| </ | </ | ||
| - | * Interno/ | + | * Interno/ |
| <sxh css> | <sxh css> | ||
| Línea 873: | 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 ==== | ||
clase/daw/diw/2eval/tema06.1737364863.txt.gz · Última modificación: 2025/01/20 10:21 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
