[SOLUCIONADO] media queries, píxeles, porcentajes, anchuras... un par de dudas

[BramSt]

Hola a todos, en primer lugar no sé si es este el subforo adecuado, pero no sabía donde exponer mi duda.


Estudiando todo el tema al que me refiero en el título, no termino de entender cómo funciona por ejemplo el tema de los píxeles...

Es decir, sé que su tamaño no es concreto, sino que depende de la resolución y tamaño de la pantalla, ¿no es así? Para saber si voy bien...

Pero si una pantalla de TV tiene 1920*1080px de resolución, y una de movil tiene la misma resolución, ¿cómo es que a la hora de crear un media query parece que se basa en el número de píxeles que esté ocupando el navegador?

Qyiero decir, que si el código tiene esto:

Código CSS:

@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
 

los 600 px no serán también 600 px (pero más pequeños) en la pantalla del movil?

No lo entiendo muy bien, si pudiérais ayudarme estaría muy agradecido.

Por otra parte, en un hilo me han recomendado usar porcentajes para el tema de ajustar una página al ancho del navegador y demás. ¿Cuál es la diferencia entonces entre usar porcentajes y las diferentes unidades de medida relativas a la hora de setear el tamaño de una página? Por lo que sé, tanto em, como px, como porcentajes, me darían un tamaño relativo... Ya he tratado de estudiar y entender las diferencias, pero no sé la diferencia en el uso real de unos y otros a la hora de ajustar.

Muchas gracias otra vez.

[Rafael]

Un móvil hace trampa. Es como los políticos.

Por un lado dice que es de 1920px pero por otro lado en su declaración de impuestos dice 480px o 400px por ejemplo.

Es una conversión interna donde casi todo reacciona con los px decclarados, pero en las imágenes y al renderizar el texto las usa a más resolución si puede.

[Rafael]

EM y porcentajes es tamaño relativo. Px es una medida absoluta. Lo de absoluto es relativo, claro al tamaño del dispositivo, pero es fijo en "ese" dispositivo.

EM hay que definirlo antes. Al principio del documento debes declarar la medida base, por ejemplo body {font-size: 16px;}

Y de ahí ya parten las EM y porcentajes.

[BramSt]

Iniciado por Rafael

Un móvil hace trampa. Es como los políticos.

Por un lado dice que es de 1920px pero por otro lado en su declaración de impuestos dice 480px o 400px por ejemplo.

Es una conversión interna donde casi todo reacciona con los px decclarados, pero en las imágenes y al renderizar el texto las usa a más resolución si puede.

Gracias de nuevo Rafael, por las dos respuestas.

Entonces el max device-width:480px que se suele usar para smartphones, esos 480 px no son 480 px de su resolución HD, sino una "trampa" con la que miden su resolución a la hora de maquetar?

[Rafael]

Síp. Probablemente la trampa es la otra, pero sí. Es la idea.