CSS – Variar css de acordo com a resolução

Um técnica possível para utilizar diferentes css de acordo com a resolução está exemplificado abaixo, neste micro tutorial.

Segue o exemplo de como definir css de acordo com a resolução do visitante do seu site.

<script type="text/JavaScript">
    var screenwidth = screen.width;
    if (screenwidth < <largura_resolução>){
      document.write('<link rel="stylesheet" href="http://path/arquivo.css" type="text/css" media="screen" />');
    }
    (...)
    else {
      document.write('<link rel="stylesheet" href="http://path/outro_arquivo.css" type="text/css" media="screen" />');
    }
</script>

Gostou? Tire um minutinho e dê sua contribuição para Drall Dev Community no Patreon!

Artigos relacionados:

Como implementar o jQuery timeago Maneira mais eficiente para detectar ad blockers Apresentando mensagem na tela para usuários de ad blocker Qual é o Content-Type correto para respostas JSON Como fazer download de todas as imagens / fotografias de uma página do site http://skuawk.com/ Como deletar uma imagem inserida no post via Add Media no WordPress Como tirar uma foto da tela do seu computador usando windows Como adicionar jQuery utilizando o console Usuários da GVT tendo problemas com resolução de nomes para domínios do Google