Desarrolladores web HTML5 y CSS3 pueden utilizar AJAX para hacer un sitio móvil sensible. Una manera de hacer un trabajo de sitio bien en múltiples resoluciones es proporcionar diferentes reglas CSS basado en el tipo de papel detectado.

CSS3 tiene una nueva característica maravillosa llamada consulta de medios, que le permite especificar un tipo de medio y determinar las diversas características de la pantalla. Usted puede utilizar esta especificación para construir un subconjunto de la CSS que se debe utilizar cuando el navegador detecta un determinado tipo o tamaño de pantalla.

Especifique un tipo de medio

los media regla le permite especificar qué tipo de salida de la CSS se incluye debe modificar. Los tipos de medios más comunes son pantalla, impresión, del habla, de mano, de proyección, y televisión. Hay más, pero sólo impresión y pantalla son universalmente admitido.

Por ejemplo, el siguiente código especificar el tamaño de la fuente cuando el usuario imprime el documento:

media impresión {body {font-size: 10pt-}}

Esta CSS puede ser embebido en un documento normal CSS, pero por lo general se debe colocar al final del documento, ya que mantiene excepciones a las reglas normales. Usted puede colocar tanto código CSS como desee dentro de la media elemento, pero sólo se debe poner el código CSS que es relevante para la situación específica que le interesa.

Cómo agregar un calificador

Además de especificar el tipo de papel, el media regla tiene otro truco muy potente. Usted puede solicitar una condición especial de clasificación de los medios de comunicación.

Cuando el navegador es más ancho de 500 píxeles, se puede ver el texto negro sobre un fondo blanco. Pero hacer la pantalla más estrecho, y ves algo interesante.

Normalmente se usaría este truco para cambiar el diseño, pero comenzar con este ejemplo que cambia de color simple. Aquí está el código para este ejemplo sencillo:

Calificador de demostración
Trate de cambiar el tamaño de esta página. Cuando el iswider página de 500 píxeles, muestra texto negro sobre fondo awhite.
Cuando la página es más estrecho que 500 pixels, la colorsreverse, dando texto en blanco sobre un fondo negro.

Aquí es cómo construir una página que se adapta al ancho de la pantalla:

1. Construya su sitio como de costumbre.

   Este es un lugar donde que toda " separar el contenido de la disposición Nº 148; Lo realmente vale la pena. Lo mismo HTML tendrá dos estilos diferentes.

2. Aplicar un estilo CSS en la forma normal.

   Construye tu estilo estándar de la forma habitual - por ahora, incrustar el estilo de la página con el etiqueta. Su estilo principal debe manejar el caso más común. (Por lo general, un ordenador de sobremesa de tamaño completo.)

3. Construir un media gobernar.

   los media Regla CSS debe ir al final de la CSS normal.

4. Establezca un max-width: 500px calificador.

   Este calificador indica que sólo se utilizarán las reglas dentro de este segmento si el ancho de la pantalla es menor que 500 píxeles.

5. Coloque reglas especiales de casos dentro del nuevo sistema del estilo.

   Cualquier regla CSS se definen dentro de la media regla se activará si el calificador es cierto. Utilice estas reglas para anular el CSS existente. Nota usted no tiene que redefinir todo. Justamente proporcionando reglas que tienen sentido en su contexto particular.

6. Añadir una ventana gráfica.

   Navegadores móviles a veces tratar de cambiar la escala de la página así que todo se puede ver a la vez. Esto contradice el objetivo de un estilo especial, a fin de utilizar el ventana metaetiqueta para indicar que el navegador debe informar de su ancho real. También suele ser útil para desactivar la página descalcificación porque ya no debería ser necesario.

En este ejemplo, el navegador se aplica siempre el principal (el texto negro sobre un fondo blanco) estilo. Entonces se ve en la media gobernar para ver si el calificador es cierto.

Si el ancho es de menos de 500 píxeles, la max-width: 500px calificador se evalúa a cierto, y todo el código CSS en el interior del media segmento está habilitado. El navegador almacena entonces ambos conjuntos de CSS y aplica el CSS correcto basado en la condición de la regla.