Me gusta la idea de Andy aquí:
.wrapper {
width: clamp(16rem, 90vw, 70rem);
margin-left: auto;
margin-right: auto;
padding-left: 1.5rem;
padding-right: 1.5rem;
}Normalmente solo establecería un max-width allí, pero como dice Andy:
Esto se convierte en un pequeño problema en las ventanas gráficas de tamaño mediano, como las tabletas en modo vertical, en el contenido de formato largo, como este artículo porque, contextualmente, las longitudes de las líneas se sienten muy largas.
Por lo tanto, en pantallas súper grandes, tendrá un límite de 70 rem (o lo que crea que es un buen máximo), y en pantallas pequeñas obtendrá el ancho completo, lo cual está bien. Pero son esos intermedios los que no son tan buenos. Hice una pequeña demostración para tener una idea. Este video deja en claro lo que pienso:
Enlace directo →