Diferencias

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

--- clase:daw:diw:2eval:tema06 [2024/01/09 19:40]
admin [Cálculos en CSS]
+++ clase:daw:diw:2eval:tema06 [2025/02/16 22:18] (actual)
admin [Cálculos en CSS]
@@ Línea 26: / Línea 26: @@
 Mas información:
   * [[https://css-tricks.com/snippets/html/responsive-meta-tag/|Responsive Meta Tag]]
-  * [[https://developer.mozilla.org/es/docs/M%C3%B3vil/Viewport_meta_tag|Usando la etiqueta meta viewport para controlar la composición en los navegadores móviles]]
+  * [[https://web.archive.org/web/20200415000746/https://developer.mozilla.org/es/docs/M%C3%B3vil/Viewport_meta_tag|Usando la etiqueta meta viewport para controlar la composición en los navegadores móviles]]
   * [[https://developers.google.com/web/fundamentals/design-and-ux/responsive/#set-the-viewport|Configurar la ventana de visualización]]
   * [[https://github.com/alvaroadlf/HEAD/blob/master/README.md|Todo sobre la cabecera <HEAD>]]
@@ Línea 87: / Línea 87: @@
 }
 </sxh>
+Otra forma de cambiar el ''font-size'' por defecto es configurar el tamaño de ''1rem'' en el propio navegador. Lo suele hacer gente con diversidad visual. En chrome es en "Configuración --> Aspecto --> Personalizar fuentes"
+Veamos ahora como se usa ''rem'' en bootstrap para los botones:
+^ Tamaño botón  ^  Tamaño de fuente  ^  Padding horizontal  ^  Padding vertical  ^
+| Normal  |  ''1rem''  |  ''0.75rem''  |  ''0.375rem''  |
+| Grande ''btn-lg'' |  ''1.25rem''  |  ''1rem''  |  ''0.5rem''  |
+| Pequeño ''btn-sm''  |  ''0.875rem''  |  ''0.5rem''  |  ''0.25rem''  |
+Vamos ahora los mismo datos pero en ''px'' suponiendo que el tamaño de fuente es ''16px''.
+^ Tamaño botón  ^  Tamaño de fuente  ^  Padding horizontal  ^  Padding vertical  ^
+| Normal  |  ''16px''  |  ''12px''  |  ''6px''  |
+| Grande ''btn-lg''  |  ''20px''  |  ''16px''  |  ''8px''  |
+| Pequeño ''btn-sm''  |  ''14px''  |  ''8px''  |  ''4px''  |
+Y por último veamos la relación que hay entre en padding y el tamaño de fuente en %
+^ Tamaño botón  ^  Padding horizontal respecto \\ del tamaño de fuente   ^  Padding vertical respecto \\ del tamaño de fuente  ^
+| Normal  |  75%  |  37,5%  |
+| Grande ''btn-lg''  |  80%  |  40%  |
+| Pequeño ''btn-sm''  |  57,142%  |  28,571%  |
+Resulta que no hay una relación constante entre el tamaño de la fuente y el tamaño del padding.
+Es decir para un tamaño normal el padding horizontal es el 75% del tamaño de la fuente pero
+en un botón grande (que el tamaño de fuente es más grande) el padding horizontal es el 80% del tamaño de la fuente
+y para terminar en un botón pequeño el padding horizontal es el 57% del tamaño de la fuente. ¿No debería ser constante el tamaño del padding respecto del tamaño de fuente? Por lo tanto si aumentamos el tamaño de fuente en el navegador , los padding no deberían aumentar proporcionalmente sino como vemos que lo hace bootstrap.
@@ Línea 94: / Línea 123: @@
 <note tip>Mi recomendación es usar siempre ''px'' ya que con los modificadores responsivos y nuestro sistema de tamaños , podemos controlar como queda todo.</note>
@@ Línea 197: / Línea 225: @@
 ==== Calculo de valores con clamp ====
-La siguiente gráfica muestra como funciona ''clamp(200px,60vw,400px)''.
+La siguiente gráfica muestra como funciona ''clamp(200px, 59.88vw + 0.59px, 400px)''.
 {{ :clase:daw:diw:2eval:clamp.png |}}
@@ Línea 203: / Línea 231: @@
 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_{lower}$ : El ancho de pantalla para el valor mínimo que es ''333px''.
-  *  $w_{upper}$ : El ancho de pantalla para el valor máximo.
+  *  $w_{upper}$ : El ancho de pantalla para el valor máximo que es ''667px''.
-  *  $min_{value}$ : El valor mínimo de la propiedad CSS
+  *  $min_{value}$ : El valor mínimo de la propiedad CSS que es ''200px''.
-  *  $max_{value}$ : El valor máximo de la propiedad CSS
+  *  $max_{value}$ : El valor máximo de la propiedad CSS que es ''400px''.
 \\
-  *  $pendiente$ : El valor que se pone en vw.
+  *  $pendiente$ : El valor que se pone en ''vw'' que es ''59.88vw''..
+  *  $coeficiente_{posición}$ : Es el valor que se suma a la pendiente en ''px'' que es ''0.599px''.
-$$
-pendiente=60
-\\
-min=200
-\\
-max=400
-$$
-\\
-\\
-$$
-w_{lower} * \frac {pendiente}{100}=min_{value}
-\\
-w_{lower} = \frac {min_{value}*100}{pendiente}= \frac {200*100}{60}=333px
-$$
-\\
-\\
-$$
-w_{upper} * \frac {pendiente}{100}=max_{value}
-\\
-w_{upper} = \frac {max_{value}*100}{pendiente}= \frac {400*100}{60}=667px
-$$
+Pero, ¿como calculamos los valores de  $pendiente$  y  $coeficiente_{posición}$ ?.
 De forma genérica podemos establecer los valores de las 4 variables de la siguiente forma:
@@ Línea 244: / Línea 249: @@
 $$
-pendiente=\frac {max_{value} - min_{value}}{w_{upper} - w_{lower}}*100
+pendiente=\frac {max_{value} - min_{value}}{w_{upper} - w_{lower}} \cdot 100
 \\
-coeficiente_{posición}=min_{value} - \frac{pendiente}{100}*w_{lower}
+coeficiente_{posición}=min_{value} - \frac{pendiente}{100} \cdot w_{lower}
 $$
@@ Línea 258: / Línea 263: @@
 $$
-pendiente=\frac {max_{value} - min_{value}}{w_{upper} - w_{lower}}=\frac {20-12}{600-230}*100=2,1621622
+pendiente=\frac {max_{value} - min_{value}}{w_{upper} - w_{lower}} \cdot 100=\frac {20-12}{600-230} \cdot 100=2,1621622
 \\
-coeficiente_{posición}=min_{value} - \frac{pendiente}{100}*w_{lower}=12-\frac{2,1621622}{100}*230=7,02702694
+coeficiente_{posición}=min_{value} - \frac{pendiente}{100} \cdot w_{lower}=12-\frac{2,1621622}{100} \cdot 230=7,02702694
 $$
@@ Línea 268: / Línea 273: @@
 .c-titulo {
     font-size: clamp(12px,2.1621622vw + 7.02702694px,20px);
+}
+</sxh>
+En la primera figura
+{{ :clase:daw:diw:2eval:clamp.png?300 |}}
+cuyos valores eran:
+  *  $w_{lower}$ : 333px
+  *  $w_{upper}$ : 667px
+  *  $min_{value}$ : 200px
+  *  $max_{value}$ : 400px
+Entonces
+$$
+pendiente=\frac {max_{value} - min_{value}}{w_{upper} - w_{lower}}\cdot 100=\frac {400-200}{667-333} \cdot 100=59.88
+\\
+coeficiente_{posición}=min_{value} - \frac{pendiente}{100} \cdot w_{lower}=200-\frac{59.88}{100} \cdot 333=0.5989
+$$
+Por lo tanto el css será:
+<sxh css>
+.c-titulo {
+    font-size: clamp(200px, 59.88vw + 0.5989px, 400px);
 }
 </sxh>
@@ Línea 383: / Línea 415: @@
             }
+            .c-table__head--width-1 {
+              width: 100px;
+              min-width: 100px;
+            }
+            .c-table__head--width-2 {
+              width: 150px;
+              min-width: 150px;
+            }
+            .c-table__head--width-3 {
+              width: 200px;
+              min-width: 200px;
+            }
         </style>
     </head>
@@ Línea 397: / Línea 440: @@
                 <th class="c-table__head c-table__head--min-width-2 c-table__head--max-width-3 ">Title</th>
                 <th class="c-table__head c-table__head--min-width-1 c-table__head--max-width-2">Year</th>
-                <th class="c-table__head c-table__head--min-width-1 c-table__head--max-width-2">ISBN-13</th>
+                <th class="c-table__head c-table__head--width-3">ISBN-13</th>
-                <th class="c-table__head c-table__head--min-width-1 c-table__head--max-width-2">ISBN-10</th>
+                <th class="c-table__head c-table__head--width-2">ISBN-10</th>
               </tr>
             </thead>
@@ Línea 539: / Línea 582: @@
 @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 554: / Línea 597: @@
 @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 569: / Línea 612: @@
 @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 585: / Línea 628: @@
 <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 600: / Línea 643: @@
   * [[https://dev.to/polypane/css-breakpoints-used-by-popular-css-frameworks-hl9|CSS breakpoints used by popular CSS frameworks]]
-  * [[https://gist.github.com/ptibbetts/7b726ae20914c11eb953fdfdf3ee34ed|Comparing Breakpoints in CSS Toolkits and Frameworks]]
+  * [[https://gist.github.com/paultibbetts/7b726ae20914c11eb953fdfdf3ee34ed|Comparing Breakpoints in CSS Toolkits and Frameworks]]
@@ Línea 729: / Línea 772: @@
 </note>
-  * Interno/Fluido: Se suele usar con imágenes.
+  * Interno/Fluido: Las tablas
 <sxh css>
@@ Línea 773: / Línea 816: @@
 </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 834: / Línea 877: @@
 ==== Ejercicio 5 ====
-Dado el típico layout de cabecera, menú lateral, cuerpo y pie. Haz una página HTML pero de forma que si el tamaño de la pantalla es menor que 500px no se vea el menú lateral. Deberás hacerlo usando BEM
+Dado el típico layout de cabecera, menú lateral, cuerpo y pie. Haz una página HTML pero de forma que si el tamaño de la pantalla es menor que 500px no se vea el menú lateral. Deberás hacerlo usando BEM e externo.
 ==== Ejercicio 6 ====
 Crea una clase css llamada ''.g--color-fondo-responsivo'' de forma que cambia el color de fondo si el ancho del dispositivo (o ventana) tiene:
-  * Menos de 500px sea de color rojo
+  * Menos de 576px sea de color rojo
-  * Entre 500px y 750px sea de color verde
+  * Entre 576px y 768px sea de color verde
-  * Entre 750px y 1000px sea de color azul
+  * Entre 768px y 992px sea de color azul
-  * Más de 1000px sea de color naranja
+  * Más de 992px sea de color naranja
 Lo usarán en una página HTML donde estará un cuadrado de 200px x 200px
@@ Línea 866: / Línea 909: @@
 </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 890: / Línea 933: @@
 ==== 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 899: / Línea 942: @@
 ==== 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