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/02/22 12:13] (actual)
admin
@@ 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:
@@ Línea 426: / Línea 539: @@
 @media (min-width: 576px) {
-    .g--font-size-1\@movil {
+    .g--font-size-1\@tablet {
         font-size: 40px;
     }
-    .g--font-size-2\@movil {
+    .g--font-size-2\@tablet {
         font-size: 50px;
     }
-    .g--font-size-3\@movil {
+    .g--font-size-3\@tablet {
         font-size: 55px;
     }
-    .g--font-size-4\@movil {
+    .g--font-size-4\@tablet {
         font-size: 70px;
     }
@@ Línea 441: / Línea 554: @@
 @media (min-width: 768px) {
-    .g--font-size-1\@tablet {
+    .g--font-size-1\@desktop {
         font-size: 40px;
     }
-    .g--font-size-2\@tablet {
+    .g--font-size-2\@desktop {
         font-size: 50px;
     }
-    .g--font-size-3\@tablet {
+    .g--font-size-3\@desktop {
         font-size: 55px;
     }
-    .g--font-size-4\@tablet {
+    .g--font-size-4\@desktop {
         font-size: 70px;
     }
@@ Línea 456: / Línea 569: @@
 @media (min-width: 992px) {
-    .g--font-size-1\@desktop {
+    .g--font-size-1\@fulldesktop {
         font-size: 40px;
     }
-    .g--font-size-2\@desktop {
+    .g--font-size-2\@fulldesktop {
         font-size: 50px;
     }
-    .g--font-size-3\@desktop {
+    .g--font-size-3\@fulldesktop {
         font-size: 55px;
     }
-    .g--font-size-4\@desktop {
+    .g--font-size-4\@fulldesktop {
         font-size: 70px;
     }
@@ Línea 472: / Línea 585: @@
 <sxh html>
-<p class="g--font-size-1  g--font-size-3@desktop">Hola mundo</p>
+<p class="g--font-size-1  g--font-size-3@fulldesktop">Hola mundo</p>
 </sxh>
 En el ejemplo por defecto el tamaño de la fuente será de 40px pero en resoluciones mayores de 992px será de 55px.
-Lo que hacemos es crear todas los modificadores globales o modificadores de bloques para las distintas resoluciones pero añadiendo el sufijo ''@movil'' , ''@tablet'' o ''@desktop''. E indicando en el HTML que tamaño usar según la resolución de la pantalla.
+Lo que hacemos es crear todas los modificadores globales o modificadores de bloques para las distintas resoluciones pero añadiendo el sufijo  ''@tablet'' , ''@desktop'' o ''@fulldesktop''. E indicando en el HTML que tamaño usar según la resolución de la pantalla.
 Otro ejemplo de ello lo podemos ver en [[https://www.webstoemp.com/blog/notes-on-using-css-grid-in-production/|Notes on using CSS Grid in production]]
@@ Línea 660: / Línea 773: @@
 </sxh>
-  * Externo/Escalonado: Es el que usamos con ''@movil'' o ''@tablet'' , etc.
+  * Externo/Escalonado: Es el que usamos con ''@tablet'' o ''@desktop'' , etc.
 <sxh html>
@@ Línea 753: / Línea 866: @@
 </sxh>
-Y modificalas con el sufijo "@movil", "@tabled" y "@desktop" y repite el ejercicio anterior pero en vez de usar la clase ''.g--color-fondo-responsivo'' uses las clases que acabas de crear
+Y modificalas con el sufijo "@tabled", "@desktop" y "@fulldesktop" y repite el ejercicio anterior pero en vez de usar la clase ''.g--color-fondo-responsivo'' uses las clases que acabas de crear
 ==== Ejercicio 8 ====
@@ Línea 777: / Línea 890: @@
 ==== Ejercicio 9 ====
 Modifica el ejercicio anterior de forma que ahora los modificadores globales se puedan usar de forma responsiva con
-  * @movil
   * @tablet
   * @desktop
+  * @fulldesktop
 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.
@@ Línea 786: / Línea 899: @@
 ==== 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
+  * @fulldesktop

logongas

Herramientas de usuario

Herramientas del sitio

Diferencias

Herramientas de la página