A petición suya, este artículo cubrirá Consultas de medios, lo que significa usar Tipos de medios junto con una o más expresiones sobre las características de un medio para definir el formato para diferentes dispositivos. Los navegadores o aplicaciones leen las expresiones definidas en el Consulta, y si el dispositivo en cuestión cumple dichas condiciones, se procederá al correspondiente CSS se aplica.
Los tipos de medios especifican a qué tipo de medio está destinado un bloque de CSS. HTML se creó para ser portátil, es decir, para ser leído e interpretado por cualquier tipo de dispositivo. Sin embargo, cada dispositivo procesa el HTML de forma diferente debido a factores como las dimensiones de la pantalla (es decir, "resolución”). Por ejemplo, acceder a un sitio desde una computadora de escritorio no se comportará de la misma manera que acceder a él desde un dispositivo móvil, porque son dispositivos diferentes con diferentes contextos de navegación.
El desafío con las consultas de medios hoy en día es que cada vez surgen más dispositivos con diferentes tamaños de pantalla y capacidades de hardware similares a las de las computadoras de escritorio, lo que los lleva a navegar casi como máquinas de escritorio. iPhone X Por ejemplo: su calidad de visualización es excelente y su navegador representa las páginas exactamente como un navegador de escritorio típico.
En ese caso, no es necesario preparar un diseño y CSS específicamente para portátil Tipos de medios en el iPhone, ya que, aunque es un dispositivo portátil, no se comporta como tal. Tampoco se comporta exactamente como un ordenador de escritorio. Aunque el motor de renderizado de Safari es idéntico al de la versión de escritorio, el comportamiento y los patrones de navegación del usuario siguen siendo diferentes. Nos encontramos en un punto intermedio: no podemos proporcionar un CSS completamente independiente para dispositivos portátiles, ni podemos depender únicamente de un ordenador de escritorio.pantalla) hoja de estilo.
A continuación se muestra cómo definiría qué reglas de hoja de estilo se deben cargar:
<style>
@media pantalla y (ancho máximo: 1024 px) {
.small-resolution { pantalla: ninguna; }
}
.small-resolution { pantalla: bloque; }
</style>
Opcionalmente, puede crear un archivo separado .css archívelo y alójelo en su propio servidor o a través de la solución CDN de mi startup, Blenner SmartCDNLuego, inclúyelo en la sección de metadatos de tu HTML de la siguiente manera:
<link rel=”stylesheet” href=”URL_OF_YOUR_CSS_FILE”>
Una vez que el archivo CSS esté listo, simplemente "invoque" la clase donde necesite el comportamiento responsivo. Por ejemplo, para aplicarlo a una imagen envuelta en una etiqueta personalizada llamada "C":
<c class=”small-resolution”>
<img src="”IMAGE_URL”" alt=""DESCRIPCIÓN"" id="”OPTIONAL_ADDITIONAL_ID”">
</c>
¡Espero que esto ayude! 😀
¡Deja tus comentarios a continuación y compártelos con tus amigos!
