Dimensionamiento
Añade el volumen en ancho o alto necesario a tus elementos con estas utilidades.
-- Width porcentajes %
Clases:
Ejemplos:
width auto
max width 100%
width 100%
width 75%
width 50%
width 25%
width 20%
HTML
...-- Max-width min-width px
Clases:
Ejemplos:
300px
200px
100px
90px
80px
70px
60px
50px
HTML
min-width: 300; max-width: 300px;-- Max-width px
Clases:
HTML
...-- Porcentajes con puntos de corte
Cambia las dimensiones estableciendo una clase con punto de corte, puedes utilizarla junto con anchos de porcentajes o pixeles.
| Clase | Punto de corte |
|---|---|
| lap-w100 | @media screen (max-width: 1200px). |
| tab-w100 | @media screen (max-width: 990px). |
| .pha-w100 | @media screen (max-width: 770px). |
| .pho-w100 | @media screen (max-width: 550px). |
Uso con porcentajes y puntos de corte
Nota Para poder ver los cambios, utiliza el inspector de elementos > vista de diseño adaptable, o si estás visualizando esta sección desde un dispositivo móvil haz uso del giroscopio.
HTML
...width 50%
-- View port width / View port height
Clases:
Ejemplos:
HTML - width vw
width: 100vw;
HTML - height vh
height: 100vh;