css3 - query - ¿Cómo codificar las consultas de medios CSS dirigidas a TODOS los dispositivos móviles y tabletas?
responsive css (3)
En lugar de usar anchos específicos inicialmente, o jugar con orientaciones, o cualquier otra tontería, sugiero usar la siguiente etiqueta de medios ...
@media only screen and (min-resolution: 117dpi) and (max-resolution: 119dpi), only screen and (min-resolution: 131dpi) and (max-resolution: 133dpi), only screen and (min-resolution: 145dpi) and (max-resolution: 154dpi), only screen and (min-resolution: 162dpi) and (max-resolution: 164dpi), only screen and (min-resolution: 169dpi) {
/* Your touch-specific css goes here */
}
@media only screen and (min-resolution: 165dpi) and (max-resolution: 168dpi), only screen and (min-resolution: 155dpi) and (max-resolution: 160dpi), only screen and (min-resolution: 134dpi) and (max-resolution: 144dpi), only screen and (min-resolution: 120dpi) and (max-resolution: 130dpi), only screen and (max-resolution: 116dpi) {
/* Your click-specific css goes here */
}
¿Y para qué usas estas etiquetas? Para configurar cosas para hover y haga clic vs eventos táctiles.
Los dispositivos táctiles, con excepción de unos pocos dispositivos en las áreas grises arriba mencionadas, tienen una resolución muy diferente a los dispositivos de escritorio. No-esto- para establecer elementos de diseño, sino elementos de navegación. Algunos pudents pueden llorar porque puede ser mejor cierta locura con el ancho máximo, pero hay tantos teléfonos HD que es ridículo que el ancho máximo del dispositivo rápidamente se vuelva inútil.
Sin embargo, debe utilizar consultas de ancho de ancho de medios. Sin embargo, no se moleste con el ancho máximo del dispositivo, solo el ancho máximo y el ancho mínimo. Deje que las etiquetas anteriores se dirijan a sus usuarios táctiles frente a no táctiles, permita direcciones de ancho mínimo frente a ancho máximo en función del tamaño de la ventana y ajuste las imágenes del sitio.
Además, usar la orientación para determinar si es móvil o no es una tontería, ya que incluso los monitores se pueden colocar en varias orientaciones (una configuración común que he visto para los 3 monitores es un monitor de centro vertical y monitores laterales horizontales).
Para las vistas de ancho, céntrese en hacer que su sitio esté limpio en varios anchos, ignorando a qué tipo de dispositivo realmente accede, simplemente asegúrese de que la pantalla se muestre limpiamente en varios tamaños. Ese es un buen diseño que se aplica tanto a equipos de escritorio como a dispositivos móviles. Si tienen su sitio en una pequeña ventana en la esquina superior izquierda de su pantalla para referencia (o distracción rápida) mientras usan la mayoría de sus propiedades de pantalla en otros lugares, y debe ser para ellos, así como para los usuarios móviles, que su Se construyen anchos más pequeños para. Intentar cualquier otra cosa es ir rápidamente por un camino muy doloroso y contraproducente para el desarrollo web. Así que para esos anchos más pequeños, puedes establecer tus anchos a lo que quieras, pero incluiré algunos que personalmente me gustan.
Entonces, en conjunto, deberías tener algo como esto ...
@media only screen and (min-resolution: 117dpi) and (max-resolution: 119dpi), only screen and (min-resolution: 131dpi) and (max-resolution: 133dpi), only screen and (min-resolution: 145dpi) and (max-resolution: 154dpi), only screen and (min-resolution: 162dpi) and (max-resolution: 164dpi), only screen and (min-resolution: 169dpi) {
#touch_logo {
display: inherit;
}
#mouse_logo {
display: none;
}
/* Your touch-specific css goes here */
}
@media only screen and (min-resolution: 165dpi) and (max-resolution: 168dpi), only screen and (min-resolution: 155dpi) and (max-resolution: 160dpi), only screen and (min-resolution: 134dpi) and (max-resolution: 144dpi), only screen and (min-resolution: 120dpi) and (max-resolution: 130dpi), only screen and (max-resolution: 116dpi) {
#touch_logo {
display: none;
}
#mouse_logo {
display: inherit;
}
/* Your click-specific css goes here */
}
@media (min-width: 541px){
/* Big view stuff goes here. */
}
@media (max-width: 540px) and (min-width: 400px){
/* Smaller view stuff goes here. */
}
@media (max-width: 399px){
/* Stuff for really small views goes here. */
}
Aunque, no olvides incluir lo siguiente en la cabecera de tu página:
<meta name=''viewport'' content="width=device-width, initial-scale=1" />
Todavía puede romperse en algunos casos, pero esto debería ser más conciso y más completo que muchas otras soluciones.
@media only screen and (max-device-width : 640px) {
/* Styles */
}
@media only screen and (max-device-width: 768px) {
/* Styles */
}
Esto es lo que tengo hasta ahora. La maqueta de PSD para el sitio móvil en el que estoy trabajando tiene un ancho de 640px. La otra, la versión para tabletas del sitio, es 768px. Pude probar el sitio en mi navegador web utilizando solo el ancho máximo, pero ahora es el momento de que este sitio funcione en los dispositivos, y sigue mostrando la página web normal de tamaño completo. Las dos consultas anteriores son mi mejor conjetura. ¿A dónde me voy mal?
Esto se puede hacer con consultas de medios de nivel 4: (el soporte del navegador es bastante bueno - CaniUse )
Características de los medios de interacción
La idea aquí es apuntar a los dispositivos según sus capacidades . (como se indica, verificando el tamaño o la resolución del dispositivo que tiende a mover los objetivos)
La función de medios de pointer consulta la calidad del mecanismo de puntero utilizado por el dispositivo.
La función de medios de hover activa consulta la capacidad del usuario para desplazarse sobre los elementos de la página con un dispositivo determinado.
Así que para responder a la pregunta ...
Los dispositivos móviles / tablas son similares en que:
1) La precisión del mecanismo de entrada principal del dispositivo es limitada.
Esto significa que podríamos usar la siguiente consulta de medios:
@media (pointer:coarse) {
/* custom css for "touch targets" */
}
div {
width: 400px;
height: 200px;
color: white;
padding: 15px;
font-size: 20px;
font-family: Verdana;
line-height: 1.3;
background: green;
}
@media (pointer:coarse) {
div {
background: red;
}
}
<h2>The <a href="https://www.w3.org/TR/mediaqueries-4/#pointer">pointer media feature</a> queries the quality of the pointer mechanism used by the device.</h2>
<div>The background here will be green on ''desktop'' (devices with an accurate pointing mechanism such as a mouse) and red on ''mobile'' (devices with limited accuracy of primary input mechanism) </div>
Codepen Demo
2) El sistema de puntero primario no puede flotar
Entonces nuestra consulta de medios se vería así:
@media (hover: none) {
/* custom css for devices where the primary input mechanism cannot hover
at all or cannot conveniently hover
}
NB: Chrome / Android anterior a la versión 59 requería el valor a on-demand para las consultas de medios de desplazamiento / cualquier desplazamiento. Este valor se eliminó posteriormente de la especificación y Chrome ya no lo requiere de la versión 59. Por lo tanto, para admitir las versiones anteriores de Android necesita
@media (hover:none), (hover:on-demand) {
/* custom css for "touch targets" */
}
div {
width: 400px;
height: 150px;
color: white;
padding: 15px;
font-size: 20px;
font-family: Verdana;
line-height: 1.3;
background: green;
}
@media (hover:none), (hover:on-demand){
div {
background: red;
}
}
<h2>The <a href="https://www.w3.org/TR/mediaqueries-4/#hover">hover media feature</a> queries the user’s ability to hover over elements on the page</h2>
<div>The background here will be green on ''desktop'' (devices which support hover) and red on ''mobile'' (devices which don''t [easily] support hover ) </div>
Codepen Demo
NÓTESE BIEN:
Incluso si tuviera que conectar un mouse a un dispositivo móvil o tableta, la función de medios de desplazamiento aún none coincide con none ya que su modo de interacción principal no es compatible con el desplazamiento.
Si queremos tener en cuenta los dispositivos secundarios , podríamos utilizar las funciones de puntero a cualquier y cualquier otro elemento flotante.
Entonces, si quisiéramos que los dispositivos móviles conectados con un dispositivo señalador se trataran como un "escritorio", podríamos usar lo siguiente:
@media (any-hover: hover) { ... }
Lectura extra
Tiene sus estilos de escritorio principales en el cuerpo del archivo CSS (1024px y superior) y luego para tamaños de pantalla específicos:
@media all and (min-width:960px) and (max-width: 1024px) {
/* put your css styles in here */
}
@media all and (min-width:801px) and (max-width: 959px) {
/* put your css styles in here */
}
@media all and (min-width:769px) and (max-width: 800px) {
/* put your css styles in here */
}
@media all and (min-width:569px) and (max-width: 768px) {
/* put your css styles in here */
}
@media all and (min-width:481px) and (max-width: 568px) {
/* put your css styles in here */
}
@media all and (min-width:321px) and (max-width: 480px) {
/* put your css styles in here */
}
@media all and (min-width:0px) and (max-width: 320px) {
/* put your css styles in here */
}
Esto cubrirá casi todos los dispositivos que se estén utilizando; me concentraría en hacer que el estilo sea el correcto para los tamaños al final de la gama (es decir, 320, 480, 568, 768, 800, 1024) como para todos los demás, simplemente serán Responde al tamaño disponible.
Además, no uses px en ninguna parte, usa em''s o%