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 Última revisión Ambos lados, revisión siguiente | ||
clase:daw:diw:2eval:tema06 [2024/01/09 07:40] admin [Cálculos en CSS] |
clase:daw:diw:2eval:tema06 [2024/01/09 19:40] admin [Cálculos en CSS] |
||
---|---|---|---|
Línea 68: | Línea 68: | ||
| | ||
| | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | * También se pueden usar decimales con '' | ||
+ | |||
+ | <sxh css> | ||
+ | .c-titulo { | ||
+ | font-size: 3.14vw; | ||
} | } | ||
</ | </ | ||
Línea 150: | Línea 158: | ||
.c-titulo { | .c-titulo { | ||
font-size: calc(10vw - 10px); | font-size: calc(10vw - 10px); | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | <sxh css> | ||
+ | .c-titulo { | ||
+ | font-size: calc( ( 1 / 3 ) * 100vw); | ||
} | } | ||
</ | </ | ||
Línea 158: | Línea 172: | ||
} | } | ||
</ | </ | ||
+ | |||
+ | |||
<note tip> | <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 215: | Línea 244: | ||
$$ | $$ | ||
- | pendiente=\frac {max_{value} - min_{value}}{w_{upper} - w_{lower}} | + | pendiente=\frac {max_{value} - min_{value}}{w_{upper} - w_{lower}}*100 |
\\ | \\ | ||
- | coeficiente_{posición}=min_{value} - pendiente*w_{lower} | + | coeficiente_{posición}=min_{value} - \frac{pendiente}{100}*w_{lower} |
$$ | $$ | ||
Línea 229: | Línea 258: | ||
$$ | $$ | ||
- | pendiente=\frac {max_{value} - min_{value}}{w_{upper} - w_{lower}}=\frac {20-12}{600-230}=0,021621622 | + | pendiente=\frac {max_{value} - min_{value}}{w_{upper} - w_{lower}}=\frac {20-12}{600-230}*100=2,1621622 |
\\ | \\ | ||
- | coeficiente_{posición}=min_{value} - pendiente*w_{lower}=12-0.021621622*230=7, | + | coeficiente_{posición}=min_{value} - \frac{pendiente}{100}*w_{lower}=12-\frac{2, |
$$ | $$ | ||
Línea 238: | Línea 267: | ||
<sxh css> | <sxh css> | ||
.c-titulo { | .c-titulo { | ||
- | font-size: clamp(12px,0.021621622vw | + | font-size: clamp(12px,2.1621622vw |
} | } | ||
</ | </ | ||
+ | * 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: |