HTML5 e CSS3 desenvolvedores web pode usar AJAX para fazer um site móvel responsivo. Uma maneira de fazer um trabalho de site bem em várias resoluções é proporcionar regras CSS diferentes com base no tipo de mídia detectado.

CSS3 tem um novo recurso maravilhoso chamado consulta de mídia, que permite que você especifique um tipo de mídia e determinar várias características do display. É possível utilizar esta especificação para construir um subconjunto do CSS que deve ser usado quando o navegador detecta um determinado tipo ou tamanho de exibição.

Especificar um tipo de mídia

o @meios de comunicação regra permite que você especifique o tipo de saída do CSS incluída deve modificar. Os tipos de mídia mais comuns são tela, impressão, discurso, handheld, projeção, e televisão. Há mais, mas apenas impressão e tela são universalmente suportados.

Por exemplo, o seguinte código irá especificar o tamanho da fonte quando o usuário imprime o documento:

impressão @media {body {font-size: 10pt-}}

Este CSS pode ser incorporado em um documento normal CSS, mas normalmente deve ser colocada no final do documento porque mantém exceções às regras normais. Você pode colocar o máximo de código CSS como quiser dentro do @meios de comunicação elemento, mas você só deve colocar o código CSS que é relevante para a situação específica que você está interessado.

Como adicionar um qualificador

Além de especificar o tipo de mídia, o @meios de comunicação regra tem outro truque muito poderoso. Você pode aplicar uma condição especial de qualificação para a mídia.

Quando o navegador é maior do que 500 pixels, você pode ver texto em preto sobre um fundo branco. Mas fazer a tela mais estreita, e você vê algo interessante.

Normalmente, você usaria esse truque para mudar o layout, mas começar com este exemplo de mudança de cor simples. Aqui está o código para este exemplo simples:

qualifier Demonstração
Tente redimensionar desta página. Quando o iswider página de 500 pixels, mostra o texto preto sobre fundo awhite.
Quando a página é mais estreito do que 500 pixels, o colorsreverse, dando um texto branco sobre um fundo preto.

Aqui é como construir uma página que se adapta à largura da tela:

1. Construir o seu site, como de costume.

   Este é um lugar onde que todo # Content 147-separada do esquema # 148- coisa realmente compensa. O mesmo HTML terá dois estilos diferentes.

2. Aplicar um estilo CSS no modo normal.

   Construa o seu estilo padrão da maneira normal - por agora, incorporar o estilo na página com o tag. Seu estilo principal deve lidar com o caso mais comum. (Normalmente, um computador de tamanho normal.)

3. Construir um @meios de comunicação regra.

   o @meios de comunicação regra CSS deve ir no final do CSS normal.

4. definir um max-width: 500px qualificador.

   Este qualificador indica que as regras dentro deste segmento será usada apenas se a largura do ecrã é menor do que 500 pixels.

5. Coloque regras casos especiais dentro do novo conjunto de estilo.

   Todas as regras de CSS que você define dentro do @meios de comunicação regra será ativado se o qualificador é verdade. Use essas regras para substituir o CSS existente. Note que você não tem que redefinir tudo. Basta fornecer regras que fazem sentido em seu contexto particular.

6. Adicionar uma janela de visualização.

   navegadores móveis, por vezes, vai tentar redimensionar a página para que tudo isto pode ser visto de uma só vez. Esta derrota o propósito de um estilo especial, então use o janela de exibição metatag para indicar que o navegador deve relatar sua verdadeira largura. Também é frequentemente útil para desligar página-scaling porque já não deve ser necessário.

Neste exemplo, o navegador sempre se aplica a principal (texto preto em um fundo branco) estilo. Em seguida, ele olha para o @meios de comunicação regra para ver se o qualificador é verdadeiro.

Se a largura é menor do que 500 pixels, o max-width: 500px qualificador é avaliado como verdadeiro, e todo o código CSS dentro do @meios de comunicação segmento está activada. O navegador, em seguida, armazena os dois conjuntos de CSS e aplica o CSS correto com base no status da regra.