Como fazer um site móvel responsivo em AJAX para programação HTML5 e CSS3 - manequins

Os desenvolvedores web HTML5 e CSS3 podem usar o AJAX para criar um site móvel responsivo. Uma maneira de fazer um site funcionar bem em múltiplas resoluções é fornecer diferentes regras CSS com base no tipo de mídia detectado.

O CSS3 possui um novo recurso maravilhoso chamado consulta de mídia, , que permite especificar um tipo de mídia e determinar vários recursos da exibição. Você pode usar esta especificação para criar 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

A regra @media permite especificar o tipo de saída que o CSS incluído deve modificar. Os tipos de mídia mais comuns são tela, impressão, fala, computador de mão, projeção e TV. Há mais, mas apenas a impressão e a tela são universalmente suportadas.

Por exemplo, o código a seguir especificará o tamanho da fonte quando o usuário imprimir o documento:

@media print {body {font-size: 10pt;}}

Este CSS pode ser incorporado em um CSS normal documento, mas normalmente deve ser colocado no final do documento porque ele contém exceções às regras normais. Você pode colocar o código CSS tanto quanto desejar dentro do elemento @media, mas você só deve colocar o código CSS relevante para a situação específica em que você está interessado.

Como adicionar um qualificador

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

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

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

narrowBlack. corpo html {cor: preto; background-color: white;} @media (max-width: 500px) {body {color: white; background-color: black;}}

Qualifier Demo
Tente redimensionar esta página. Quando a página é mais larga que 500 pixels, ela mostra texto preto em um fundo branco.
Quando a página é mais estreita que 500 pixels, as cores são invertidas, dando texto branco em um fundo preto.

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

1. Crie seu site como de costume.

   Este é um lugar onde esse "conteúdo separado do layout" realmente vale a pena. O mesmo HTML terá dois estilos diferentes.

2. Aplicar um estilo CSS da maneira normal.

   Crie seu estilo padrão da maneira normal - por agora, incorpore o estilo na página com a tag.Seu estilo principal deve lidar com o caso mais comum. (Normalmente, uma área de trabalho de tamanho completo.)

3. Crie uma regra @media.

   A regra do @media CSS deve ir no final do CSS normal.

4. Defina um qualificador de largura máxima: 500px.

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

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

   Qualquer regra CSS que você define dentro da regra @media será ativada se o qualificador for verdadeiro. Use essas regras para substituir o CSS existente. Note que você não precisa redefinir tudo. Apenas forneça regras que tenham sentido em seu contexto particular.

6. Adicionar uma viewport.

   Os navegadores móveis às vezes tentam redimensionar a página para que tudo possa ser visto ao mesmo tempo. Isso derrota o propósito de um estilo especial, então use o metatag viewport para indicar que o navegador deve reportar sua largura real. Também é útil para desativar o dimensionamento de páginas porque já não deveria ser necessário.

Neste exemplo, o navegador sempre aplica o estilo principal (texto preto em um fundo branco). Então, olha para a regra @media para ver se o qualificador é verdadeiro.

Se a largura for inferior a 500 pixels, o qualificador de largura máxima: 500px é avaliado como verdadeiro e todo o código CSS dentro do segmento @media está habilitado. O navegador, em seguida, armazena ambos os conjuntos de CSS e aplica o CSS correto com base no status da regra.