Carga automática de CSS conforme resolução da tela (media)

-
Em desenvolvimento web há situações que precisamos determinar dinamicamente qual arquivo CSS será carregado conforme a resolução da tela, por exemplo, para uma tela de "pequena" largura (celular) em que alguns controles e containers precisam ter largura menores, posicionamento alterado, ou mesmo em outras situações que não tem nada a ver com largura e altura mas com outras possibilidades advindas do CSS.

Os exemplos de código abaixo servem para exemplificar:
​

Vemos a aplicação do atributo "media" para definir em que situação um determinado arquivo CSS será carregado, nos exemplos acima para uma resolução até 739 pixels será carregados o "phone.css", acima disso será carregado o "site.css".​

Obs.: o parâmetro "h" nos arquivos é meramente para o exemplo, é sobre o conceito de não gerar cache e tem que ser dinâmico.


Referência:

  • http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Comentários

Postar um comentário

Postagens mais visitadas deste blog

Selenium + Firefox = The type initializer for 'System.IO.Compression.ZipStorer' threw an exception

-
Imagem
Há uma situação que pode ocorrer quando executamos o Selenium com o Firefox (não pude testar o mesmo problema no Chrome): The type initializer for 'System.IO.Compression.ZipStorer' threw an exception.  No data is available for encoding 437. For information on defining a custom encoding, see the documentation for the Encoding.RegisterProvider method. Solução: Primeiro é necessário adicionar via nuget "System.Text.Encoding.CodePages". Então antes da execução do comando que está causando o erro executar o seguinte comando: System . Text . Encoding . RegisterProvider ( System . Text . CodePagesEncodingProvider . Instance );
Leia mais

Transmissor sem fio bluetooth Tomate MTB-803 e manual

-
Imagem
Andei sondando vários transmissores sem fio para conectar minha TV e ouvir com o fone, na verdade queria inicialmente parear o celular e conectar um fone com fio nele (então o receptor seria o celular - só que isso não funcionou), também para ligar meu contra-baixo e transmitir para uma gravação. Das opções com preço mediano eu gostei dos reviews desse Tomate MTB-803. Basicamente a necessidade é transmitir com qualidade aceitável e com lag próximo de zero. Até encontrei alguns mais completos, inclusive com função de receptor, mas já tinha comprado esse modelo da Tomate. De qualquer maneira fiquei com receio de outros na mesma faixa de preço, achei muito xing ling. Algo que percebi, e pensei até que fosse um bug (estava prestes a devolver) é que ele não conseguiu parear com meu celular e nem com meu notebook, simplesmente não é encontrado, mas pareou com um fonezinho xing ling que tenho sem problemas. Caraterísticas e  Manual  (foto e texto): Transmite sinal de...
Leia mais

Problema de rolagem de HTML em iframe no iOS

-
O "Causo" Recentemente tive um problema que, consultando vários fóruns, confirmei que realmente existe uma situação única de problema de rolagem de conteúdo HTML em um iframe em qualquer browser executado no iOS. Como é que funciona? Os browsers em dispositivos móveis adequam a rolagem de conteúdo com aquela forma elástica que ocorre quando a gente segura a tela com o dedo e arrasta para cima ou para baixo e então soltando o conteúdo vai rolando na direção que soltou sozinho até parar. Nessa condição a scrollbar padrão, aquela feiura antiquada, dá lugar a outra, e o comportamento de clique muda também para se comportar da maneira citada, toque, segura e solta. Essa mudança de visual e funcionamento difere da execução em desktop em que aparece a barra de rolagem e o conteúdo rola apenas ao clicar na barra lateral ou com teclas de atalho (page down, up e etc), e se segurar o cursor do mouse com o clique em algum ponto irá marcar texto (alguns browser permitem mudar es...
Leia mais