HTML5 e CSS3 desenvolvedores web pode usar AJAX para fazer um site móvel responsivo. Uma maneira de fazer um trabalho site bem em várias resoluções é fornecer 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. Você pode usar esta especificação para construir um subconjunto do CSS que deve ser usado quando o navegador detecta um determinado tipo ou tamanho do display.

Especifique 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 as excepçõ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.

Video: Como criar um layout responsivo com CSS3

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 texto preto no fundo awhite.
Quando a página é mais estreito do que 500 pixels, o colorsreverse, dando texto branco em 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 essa coisa toda “separar o conteúdo da disposição” realmente compensa. O mesmo HTML terá dois estilos diferentes.

2. Aplicar um estilo CSS de uma forma 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. Defina um max-width: 500px qualificador.

   Video: HTML5/CSS3 Flat Responsive Website - Start To Finish Web Design Tutorial

   Este qualificador indica que as regras dentro deste segmento só serão utilizadas se a largura da tela é menor do que 500 pixels.

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

   Quaisquer regras 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. Apenas fornecer regras que fazem sentido em seu contexto particular.

6. Adicionar uma janela de visualização.

   Video: How To Make A Website Start To Finish Responsive HTML5⁄CSS3, Image Slider & Drop Down Menu

   navegadores móveis, por vezes, vai tentar redimensionar a página para que tudo 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 informar seu verdadeiro 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 governar para ver se o qualificador é verdade.

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.