Diferencias

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

--- clase:daw:diw:2eval:tema06 [2024/01/08 20:54]
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 168: / Línea 197: @@
 ==== Calculo de valores con clamp ====
-La siguiente gráfica muestra como funciona ''clamp''.
+La siguiente gráfica muestra como funciona ''clamp(200px,60vw,400px)''.
 {{ :clase:daw:diw:2eval:clamp.png |}}
-Para calcular los tamaños de pantalla donde se producen los cambios (puntos rojos) se hace lo siguiente:
+Para calcular los tamaños de pantalla donde se producen los cambios (puntos rojos) las variable son las siguientes:
   * $w_{lower}$: El ancho de pantalla para el valor mínimo.
   * $w_{upper}$: El ancho de pantalla para el valor máximo.
+  * $min_{value}$: El valor mínimo de la propiedad CSS
+  * $max_{value}$: El valor máximo de la propiedad CSS
+\\
   * $pendiente$: El valor que se pone en vw.
-  * $min$: El valor mínimo de la propiedad CSS
-  * $max$: El valor máximo de la propiedad CSS
 $$
@@ Línea 192: / Línea 221: @@
 $$
-w_{lower} * \frac {pendiente}{100}=min
+w_{lower} * \frac {pendiente}{100}=min_{value}
 \\
-w_{lower} = \frac {min*100}{pendiente}= \frac {200*100}{60}=333px
+w_{lower} = \frac {min_{value}*100}{pendiente}= \frac {200*100}{60}=333px
 $$
@@ Línea 200: / Línea 229: @@
 \\
 $$
-w_{upper} * \frac {pendiente}{100}=min
+w_{upper} * \frac {pendiente}{100}=max_{value}
 \\
-w_{upper} = \frac {max*100}{pendiente}= \frac {400*100}{60}=667px
+w_{upper} = \frac {max_{value}*100}{pendiente}= \frac {400*100}{60}=667px
 $$
+De forma genérica podemos establecer los valores de las 4 variables de la siguiente forma:
+{{ :clase:daw:diw:2eval:clamp_generico.png |}}
+Siendo los valores de $pendiente$ y $coeficiente_{posición}$ los siguientes:
+$$
+pendiente=\frac {max_{value} - min_{value}}{w_{upper} - w_{lower}}*100
+\\
+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}$: 230px
+  * $w_{upper}$: 600px
+  * $min_{value}$: 12px
+  * $max_{value}$: 20px
+Entonces
+$$
+pendiente=\frac {max_{value} - min_{value}}{w_{upper} - w_{lower}}=\frac {20-12}{600-230}*100=2,1621622
+\\
+coeficiente_{posición}=min_{value} - \frac{pendiente}{100}*w_{lower}=12-\frac{2,1621622}{100}*230=7,02702694
+$$
+Por lo tanto el css será:
+<sxh css>
+.c-titulo {
+    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