Diferencias

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

--- clase:daw:diw:2eval:tema06 [2024/01/09 10:30]
admin [Cálculos en CSS]
+++ clase:daw:diw:2eval:tema06 [2024/02/22 12:13] (actual)
admin
@@ Línea 277: / Línea 277: @@
 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):
@@ Línea 292: / Línea 290: @@
   axes.grid(visible=True, which='major', axis='both',color="#FFFFFF",linewidth=1)
   axes.set_axisbelow(True)
-  axes.xaxis.set_major_locator(AutoLocator())
   axes.yaxis.set_major_locator(AutoLocator())
   axes.set_facecolor('#E9F0FC')
-x=np.linspace(0,1200,3000)
+max_w_size=1200
+x=np.linspace(0,max_w_size,3000)
 y=[]
 for xi in x:
-  yi=xi*(pendiente/100)
+  yi=xi*(pendiente/100)+coeficiente_posición
   if (yi<min_value):
     yi=min_value
@@ Línea 308: / Línea 306: @@
   y.append(yi)
-min_corte_x=(min_value*100)/pendiente
+min_corte_x=((min_value-coeficiente_posición)*100)/pendiente
-max_corte_x=(max_value*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)
@@ Línea 317: / Línea 315: @@
 axes.scatter(max_corte_x,max_value,c="red", zorder=2)
-decore_axes(axes,f"clamp({min_value}px,{pendiente}vw ,{max_value}px)","Tamaño pantalla","Valor propiedad CSS")
+decore_axes(axes,f"clamp({min_value}px,{pendiente}vw + {coeficiente_posición}px,{max_value}px)","Tamaño pantalla","Valor propiedad CSS")
-extra_ticks = [min_corte_x,max_corte_x]
+_=axes.set_xticks( [0,min_corte_x,max_corte_x,max_w_size])
-_=axes.set_xticks(axes.get_xticks().tolist() + extra_ticks)
 </sxh>
 ===== Imágenes =====
@@ Línea 542: / 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 557: / 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 572: / 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 588: / 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 776: / 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 869: / 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 893: / 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 902: / 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