La mejor manera de utilizar las consultas de medios para diseños móviles

Question

Sé qué son las consultas de medios y por qué se usan, pero no estoy seguro de cómo es la mejor forma de desarrollar un sitio móvil con ellas.

Ejemplo: Tengo mysite.com que tiene una hoja de estilos con todos los estilos necesarios (digamos que es un archivo bastante grande). En este punto, ninguno de mis estilos está dirigido a resoluciones de pantalla más bajas u otros dispositivos.

Luego decido hacer una versión móvil de mi sitio. Para hacerlo más fácil, apuntaré solo a usuarios de iPhone por ahora, y si el código detecta que alguien visita mi sitio en un iPhone, obtienen la versión móvil.

Mi pregunta (s): ¿Dónde está el mejor lugar para incluir estos estilos adicionales, para que un usuario vea la versión móvil? ¿Debería incluir estos estilos en la hoja de estilos original, o sería mejor si los separara en su propia hoja de estilos?

Digamos que mi sitio está construido completamente con flotadores, pero mi versión móvil solo mostrará cada elemento apilado uno encima del otro. ¿Cómo muestro eso usando consultas de medios? Es tan simple como declarar float: ninguno; ¿o algo?

Básicamente, lo que intento formular en el párrafo anterior es cómo construyo mi hoja de estilos de modo que, por ejemplo, los colores básicos y las posiciones de enlace o lo que sea que persisten en la versión móvil como en el escritorio versión pero con diferencias como apilar todo uno encima del otro en la versión móvil?

¿Son las reglas en la sección de consulta de medios de una hoja de estilo básicamente 'sobrescrito' de lo que ha declarado en las secciones de consulta no multimedia?

He encontrado muchos ejemplos del uso de consultas de medios, pero no puedo encontrar un ejemplo que funcione de un sitio completo. Si tengo un mobile.css y main.css vinculados en la misma página HTML, ¿cómo funcionan juntos para conservar algunos aspectos de mi sitio en la versión móvil pero cambiar otros?

Última pregunta: ¿es posible tener un diseño de ancho completamente fijo, pero aún utilizar consultas de medios? El código aún podrá detectar cuándo se encoge el navegador o se expande más allá de cierto ancho/alto, ¿correcto?

Disculpe la larga y probablemente confusa pregunta. Espero que puedas decir lo que estoy tratando de preguntar.

Answer 1

Hay (al menos!) Cuatro maneras de hacer esto:

1. CSS normal, con preguntas de los medios en la parte inferior (por lo que anulan la CSS arriba)
2. Dos (o más) archivos CSS cargado usando preguntas de los medios sobre el elemento de enlace
detección lado
3. Server que agrega diferentes enlaces CSS en el HTML
detección lado del servidor
4. luego una redirección a m.example.com o example.com/mobile

Si habla de cambios menores (flotante: ninguno, diferentes tamaños de fuente, etc.), entonces iría por 1. Si hay muchos y muchos cambios en el CSS, usaría 2 o 3 (3 isn No es tan bueno, ya que depende de los agentes de uso, en lugar de las propiedades de la pantalla). Si el HTML y CSS cambian, usaría 4.

Para todo esto, verifique su trabajo en Internet Explorer 6 - 8, pueden ignorar las consultas de medios y usar todo el CSS, incluidos los bits móviles si usa 1.

Tenga una mirada en http://mediaqueri.es/ para algunos ejemplos de sitios utilizando 1 y 2.

Aquí hay otro recurso que podría ayudar: https://docs.google.com/present/view?id=dkx3qtm_22dxsrgcf4

Answer 2

recomendaría la opción 3.

agente de usuario oler para detectar dispositivos no está mal. Ha sido una constante para crear sitios web móviles desde hace años. Con PHP device detection, tiene más control de su sitio en diferentes dispositivos. No solo puede elegir qué archivos CSS va a cada dispositivo, también puede elegir qué activos/márgenes se cargan por categoría de dispositivo; móvil, tableta, computadora de escritorio, televisión, etc.

Con este método, puede asegurarse de que los dispositivos móviles no reciban recursos de escritorio/estilos/marcado y viceversa, incluso si JavaScript está deshabilitado.

Answer 3

Sugiero no perder el tiempo con la detección del navegador móvil/dispositivo en absoluto; aquí es donde las consultas de los medios se destacan. Piense de forma más orgánica, y en lugar de tener que actualizar constantemente su sitio web con nuevos dispositivos y navegadores móviles, solo use un archivo CSS y utilice el ancho máximo/ancho máximo del dispositivo de CSS3.

Lugar <meta name="viewport" content="width=device-width"/> en su cabecera, y en su archivo CSS analizan en una versión de escritorio y una versión móvil:

/* Desktop Version */ 

@media screen { 
    body { 
     margin-left: 0px; 
     margin-top: 0px; 
     margin-right: 0px; 
     margin-bottom: 0px; 
     text-align: center; 
     background-color:#900; 
     background-image:url(../images/bg_white.png); 
     background-repeat: repeat-y; 
     background-position: center top; 
    } 
} 

/* SmartPhone Version */ 

@media only screen and (max-width: 480px), only screen and (max-device-width: 640px) { 
    body { 
     margin-left: 0px; 
     margin-top: 0px; 
     margin-right: 0px; 
     margin-bottom: 0px; 
     text-align: center; 
     background-color:#900; 
     background-image:url(../images/m_bg_white.png); 
     background-repeat: repeat-y; 
     background-position: center top; 
    } 
} 

Answer 4

Yo no recomendaría la opción 3. El oler se ha demostrado un mal tiempo de elección y la hora de nuevo. ¿Qué sucede cuando un dispositivo/navegador presenta información incorrecta? Es fácilmente secuestrado.

No haga esto. Consultas de medios todo el camino. Es el estándar soportado.