Diferencias

Muestra las diferencias entre dos versiones de la página.

--- 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: @@
    height: 100vw;
    max-width: 100%;
+}
+</sxh>
+  * También se pueden usar decimales con ''vw'' o ''vh''
+<sxh css>
+.c-titulo {
+    font-size: 3.14vw;
 }
 </sxh>
@@ Línea 150: / Línea 158: @@
 .c-titulo {
     font-size: calc(10vw - 10px);
+}
+</sxh>
+<sxh css>
+.c-titulo {
+    font-size: calc( ( 1 / 3 ) * 100vw);
 }
 </sxh>
@@ Línea 158: / Línea 172: @@
 }
 </sxh>
 <note tip>Dentro de ''clamp'' se pueden hacer cálculos directamente sin necesidad de usar ''calc''.</note>
+<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:
+''calc(50%-8px)''
+debiendose corregir y quedando así:
+''calc(50% - 8px)''.
+Aunque los operadores ''*'' y ''/'' no necesitan espacio en blanco, se sugiere agregarlos por razones de consistencia.
+</note>
@@ 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}
 $$
 Veamos el ejemplo en el que queremos que la propiedad ''font-size'' siga estas reglas:
-  * $w_{lower}$: 230
+  * $w_{lower}$: 230px
-  * $w_{upper}$: 600
+  * $w_{upper}$: 600px
-  * $min_{value}$: 12
+  * $min_{value}$: 12px
-  * $max_{value}$: 20
+  * $max_{value}$: 20px
 Entonces
 $$
-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,02702694
+coeficiente_{posición}=min_{value} - \frac{pendiente}{100}*w_{lower}=12-\frac{2,1621622}{100}*230=7,02702694
 $$
@@ Línea 238: / Línea 267: @@
 <sxh css>
 .c-titulo {
-    font-size: clamp(12px,0.021621622vw + 7.02702694px,20px);
+    font-size: clamp(12px,2.1621622vw + 7.02702694px,20px);
 }
 </sxh>
+  * 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  #b
+def decore_axes(axes,title,xlabel,ylabel):
+  axes.set_title(title, fontsize=14,pad=5,color="#000000")
+  axes.set_xlabel(xlabel, fontsize=10,labelpad=5,color="#003B80")
+  axes.set_ylabel(ylabel, fontsize=12,labelpad=5,color="#003B80")
+  axes.set_xlim(xmin=0)
+  axes.grid(visible=True, which='major', axis='both',color="#FFFFFF",linewidth=1)
+  axes.set_axisbelow(True)
+  axes.yaxis.set_major_locator(AutoLocator())
+  axes.set_facecolor('#E9F0FC')
+max_w_size=1200
+x=np.linspace(0,max_w_size,3000)
+y=[]
+for xi in x:
+  yi=xi*(pendiente/100)+coeficiente_posición
+  if (yi<min_value):
+    yi=min_value
+  elif (yi>max_value):
+    yi=max_value
+  y.append(yi)
+min_corte_x=((min_value-coeficiente_posición)*100)/pendiente
+max_corte_x=((max_value-coeficiente_posición)*100)/pendiente
+figure=plt.figure(figsize=(8,4))
+axes = figure.add_subplot(1,1,1)
+axes.plot(x,y)
+axes.scatter(min_corte_x,min_value,c="red", zorder=2)
+axes.scatter(max_corte_x,max_value,c="red", zorder=2)
+decore_axes(axes,f"clamp({min_value}px,{pendiente}vw + {coeficiente_posición}px,{max_value}px)","Tamaño pantalla","Valor propiedad CSS")
+_=axes.set_xticks( [0,min_corte_x,max_corte_x,max_w_size])
+</sxh>
 ===== 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:

logongas

Herramientas de usuario

Herramientas del sitio

Diferencias

Herramientas de la página