Alguém pode explicar as consultas de mídia CSS?

Question

Eu li o artigo sobre eles em css3.info, mas eu não senti que explicou bem o suficiente. Eu também não consegui fazer os exemplos para mudar com o tamanho da minha tela. Tentei em Safari, FF, Chrome.

Este é um recurso que ainda não está pronto para implementação?

Se eu quiser ajustar alguns estilos quando a janela do navegador tiver menos de 1024px de largura. Como eu posso fazer isso?

Answer 1

A regra aplicada ao tamanho da tela significa que, citando a especificação W3C "é utilizável na tela e nos dispositivos portáteis se a largura da viewport estiver" nas restrições especificadas.

http://www.w3.org/tr/css3-mediaqueries/

Se você deseja ajustar o estilo quando a viewport for inferior a 1024px, você pode usar esta regra:

@media screen and (max-width: 1024px) { … }

De qualquer forma, esta regra se aplica apenas ao tamanho real da viewport. Se você redimensionar a viewport sem recarregar a página, os estilos não serão aplicados.

Answer 2

Para aplicar uma folha de estilo em um documento quando exibido em uma tela com mais de 800 pixels de largura:

<link rel="stylesheet" media="screen and (min-device-width: 800px)" >

Para aplicar uma folha de estilo em um documento quando exibido em qualquer dispositivo com menos de 400 pixels de largura:

<link rel="stylesheet" media="all and (max-device-width: 400px)" >

lado de dentro

@media all and (max-width:800px) {
    body { color: red; }
}

para iPhone

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

::Combinando a consulta de mídia

Answer 3

Para ver como as diferentes consultas de mídia reagem na mudança de redimensionamento ou orientação, tente a demonstração nesta página:

http://www.jensbits.com/2011/04/20/media-query-playground-rotate-resize-rnse-repeat/

Você pode ajustar os atributos de consulta de mídia para ter uma ideia de como eles afetam uma página.

Answer 4

Aqui estão alguns projetos que resolvem esse problema e estão na vanguarda de CSS e tamanhos de tela dinâmicos:

• 320 ou mais:

  '320 ou mais' impede que os dispositivos móveis baixem ativos de desktop usando a folha de estilo de uma pequena tela como ponto de partida.

• LessFramework:

  Menos estrutura é um sistema de grade CSS para projetar sites adaptáveis. Ele contém 4 layouts e 3 conjuntos de predefinições de tipografia, todas com base em uma única grade.