Estoy construyendo un sitio en Internet y tengo una duda sobre el ancho del elemento main
.
El código es el que sigue:
body {
align-items: center;
display: flex;
flex-direction: column
}
nav {
background-color: #ff3b30
}
main {
background-color: #04de71;
width: 75%
}
footer {
background-color: #787aff
}
<body>
<nav>undefined</nav>
<main>undefined</main>
<footer>undefined</footer>
</body>
Tenemos claro que quiero que main
ocupe el 75% de la página. El problema reside en que a medida que el viewport tiende a 0, el contenido se va haciendo más slim, y tiene sentido, puesto que main
está ocupando el 75% del viewport de, por ejemplo, un móvil.
El comportamiento que espero y quiero es que haya espacios a ambos lados de main
ocupando (100% - 75%) / 2 y que al disminuir el viewport horizontal y llegue un punto en que el width del viewport = width de main
, este vaya "de la mano" con el viewport.
Todo esto tengo que realizarlo con %, abstenerse px o medidas relacionadas, así como consultas @media.
Dejo un ejemplo claro de un sitio web que sigue el comportamiento que quiero conseguir pero en px. Mi caso debe ser con %. El elemento a investigar es <div id="main"></div>
ch
: meyerweb.com/eric/thoughts/2018/06/28/what-is-the-css-ch-unitch
y aunquemain
no usa consultas@media
, la etiquetabody
sí que las utiliza en su fuente al darle valores enem
, esto por consiguiente va a afectar el comportamiento demain
dependiendo del valor que se de alwidth
ench
.@media
se aplica mucho después de que elviewport
tenga el mismowidth
quemain
. GIF