Este dilema se puede abordar de diferentes maneras, por lo tanto te mostramos la solución más completa en nuestra opinión.
Solución:
Las consultas de medios no utilizan esos símbolos. En su lugar, utilizan el min- y max- prefijos Esto está cubierto en la especificación:
- La mayoría de las funciones multimedia aceptan prefijos opcionales ‘min-‘ o ‘max-‘ para expresar restricciones “mayor o igual a” y “menor o igual a”. Esta sintaxis se utiliza para evitar “<" and ">” caracteres que pueden entrar en conflicto con HTML y XML. Aquellas funciones de medios que aceptan prefijos se usarán con mayor frecuencia con prefijos, pero también se pueden usar solas.
Entonces, en lugar de algo como (width <= 768px)Tu dirías (max-width: 768px) en cambio:
@media screen and (max-width: 768px)
@media screen and (max-width: 768px) ...
Consulte Sass lib include-media, que (a pesar de ser para Sass) explica cómo las llamadas como @include media('<=768px') mapas a CSS simple @media consultas En particular, consulte esta sección de los documentos.
TLDR, lo que aprendes de allí es:
Para hacer el equivalente de algo como media('<=768px') (menor o igual a 768) en CSS, debe escribir
@media (max-width: 768px)
y hacer el equivalente de media('<768px') (menos de 768) en CSS, debe escribir
@media (max-width: 767px)
Fíjate cómo resté 1 desde 768de modo que el ancho máximo sea inferior a 768 (porque queríamos emular el < comportamiento menor que en realidad no existe en CSS).
Así que para emular algo como media('>768px', '<=1024') en CSS, escribiríamos:
@media (min-width: 769px) and (max-width: 1024px)
y media('>=768px', '<1024') sería
@media (min-width: 768px) and (max-width: 1023px)
Te invitamos a sustentar nuestra investigación mostrando un comentario o dejando una puntuación te damos las gracias.