Indagamos por todo el mundo on line y así de este modo traerte la respuesta a tu problema, si continúas con preguntas puedes dejarnos la duda y respondemos porque estamos para ayudarte.
Solución:
Las consultas de medios son una buena opción para su problema.
No tiene que usar diferentes clases para estos, solo tiene que definir un comportamiento diferente según la resolución.
Puede conocer la altura y el ancho de la pantalla mediante Javascript, pero con CSS, no creo que sea posible. Lo mejor que puede hacer con css es definir el rango de dispositivos como en móviles, tabletas, computadoras portátiles, dispositivos de pantalla realmente grande y, en función de las consultas de los medios, puede definir qué hace una clase en cierto tipo de dispositivo.
Echa un vistazo a un ejemplo a continuación:
/* For Mobile */
@media screen and (max-width: 540px)
.view
width: 400px;
/* For Tablets */
@media screen and (min-width: 540px) and (max-width: 780px)
.view
width: 600px;
Las dimensiones reales pueden variar según su caso.
Este es el mismo método que utilizan muchos marcos para implementar la capacidad de respuesta.
En su ejemplo, desea establecer un ancho mínimo o alto, por lo que probablemente solo necesite usar un valor calculado a partir del tamaño de la pantalla. Si ese es el caso, puede usar las unidades vw o vh, que significan el 1% del ancho de la pantalla y el 1% de la altura de la pantalla, respectivamente.
.view
min-width: 42vw; /* Equals 42% of screen width */
min-height: 58vh; /* Equals 58% of screen width */
Usando la función calc() puede obtener resultados más sofisticados. Y con ese fin, también le gustaría ver las variables CSS. Por ejemplo:
.view
min-width: calc( 42vw - 12px );
min-height: calc( 58vmin / var(--precalculated-scaled-value) );
Pero si necesita varias reglas, como cambiar el diseño, los colores, las fuentes, etc., necesita consultas de medios. En su forma más básica, harías algo como:
@media (min-width: 800px)
.class
/* Your styling goes here */
En el ejemplo anterior, cualquier estilo dentro de la consulta de medios se activaría si la pantalla tiene al menos 800 px de ancho. (No cargaría diferentes archivos CSS dependiendo del tamaño de la pantalla, por cierto).
Finalmente, dado que usó la palabra “resolución”, creo que debo agregar que también puede configurar las consultas de medios para que coincidan con las resoluciones de pantalla. Esto es útil cuando se sirven imágenes grandes. Por ejemplo:
@media (min-width: 1200px),
(min-width: 600px) and (resolution: 200dpi)
.my-image
content: url("http://example.com/high-def-image");
Eso podría usarse para servir una imagen de mayor resolución como una mejora progresiva para pantallas más grandes o pantallas de retina.
Puedes combinar diferentes attributes en una sola consulta de medios. Este ejemplo aplicará estos estilos en todas las pantallas con un ancho de al menos 500 px y una altura de al menos 400 px:
@media all and (max-width: 500px) and (min-height: 400px)
body
background: #ccc;
.someclass
padding: 10px;
Reseñas y calificaciones del post
Eres capaz de amparar nuestra faena fijando un comentario y dejando una puntuación te lo agradecemos.