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/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 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,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:
@@ Línea 464: / 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 479: / 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 494: / 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 510: / 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 698: / 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 791: / 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 815: / 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 824: / 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