A seu pedido, este artigo abordará Consultas de mídia, o que significa usar Tipos de mídia juntamente com uma ou mais expressões sobre as características de uma mídia, a fim de definir a formatação para diferentes dispositivos. Navegadores ou aplicativos leem as expressões definidas na Consulta, e se o dispositivo em questão corresponder a essas condições, o correspondente CSS é aplicado.
Os Tipos de Mídia especificam a qual tipo de mídia um determinado bloco de CSS se destina. O HTML foi criado para ser portátil, ou seja, para ser lido e interpretado por qualquer tipo de dispositivo. No entanto, cada dispositivo renderiza o HTML de forma diferente devido a fatores como as dimensões da tela (por exemplo, “resolução”). Por exemplo, acessar um site de um desktop não se comportará da mesma forma que acessá-lo de um dispositivo móvel, porque esses são dispositivos diferentes com contextos de navegação.
O desafio com as Consultas de Mídia hoje é que cada vez mais dispositivos surgem com tamanhos de tela variados e recursos de hardware semelhantes aos de desktops, o que os leva a navegar quase como máquinas de mesa. Veja o exemplo iPhone X por exemplo: sua qualidade de exibição é excelente e seu navegador renderiza páginas exatamente como um navegador de desktop típico.
Nesse caso, não há necessidade de preparar um layout e CSS especificamente para portátil tipos de mídia no iPhone — já que, embora seja um dispositivo portátil, ele não se comporta como um. No entanto, também não se comporta exatamente como um desktop. Embora o mecanismo de renderização do Safari seja idêntico ao da versão para desktop, o comportamento e os padrões de navegação do usuário ainda são diferentes. Acabamos em um meio-termo: não podemos fornecer um CSS completamente separado para dispositivos portáteis, nem podemos depender exclusivamente de um desktop (tela) folha de estilo.
Veja abaixo como você definiria quais regras de folha de estilo devem ser carregadas:
<style>
@media screen e (largura máxima: 1024px) {
.pequena resolução { display: none; }
}
.pequena resolução { display: bloco; }
</style>
Opcionalmente, você pode criar um separado .css arquivar e hospedá-lo em seu próprio servidor ou por meio da solução CDN da minha startup, Blenner SmartCDN. Em seguida, inclua-o na seção de metadados do seu HTML assim:
<link rel=”stylesheet” href=”URL_OF_YOUR_CSS_FILE”>
Depois que seu arquivo CSS estiver pronto, basta "chamar" a classe sempre que precisar do comportamento responsivo. Por exemplo, para aplicá-lo a uma imagem encapsulada em uma tag personalizada chamada "C":
<c class=”small-resolution”>
<img src="”IMAGE_URL”" alt=""DESCRIÇÃO"" id="”OPTIONAL_ADDITIONAL_ID”">
</c>
Espero que isso ajude! 😀
Deixe seus comentários abaixo e compartilhe com seus amigos!
