Web responsive media screen

[sergiodueso]

Buenas noches. Una pregunta, ¿para móviles con una resolución de 640x400, que media screen he de poner? media screen (max-width 640px) o min-width 640px? Y por cierto, ¿qué resolución tienen los smartphone de hoy en día? Gracias

[DragonX]

depende de lo que quieras lograr. por ejemplo si queres que un div sea rojo hasta 640px utilizarias el min-width. si lo que queres es que sea rojo a partir de 640px utilizarias max-width. Una de las resoluciones mas comunes para móviles 360px x 640px
Slds.-

[sergiodueso]

A ver, yo tengo puesto esto y en mi móvil, por ejemplo, se ve bien:

Código CSS:

@media screen and (max-width:768px) {
tr.carta {font-size:14px;}
img.logo {height:200px;}
.textologo {font-size:18px;}
.textopunto {font-size:30px;}
#inicio {padding-top:20px; padding-left:0px;
           background-image:url(fondo/fondo_min.jpg);
           height: 100vh;
           width: 100vw;
           background-size: cover;
           background-size: 100% 100%;
           overflow: auto;
           
        }
 
}
 

Así la foto de fondo se va reduciendo. Pero si pongo min-width, llega un momento en que no se reduce y se queda con un tamaño fijo y no se ve toda la imagen. Es mejor de la primera forma o de la segunda? Os dejo la url para que la veais en funcionamiento. La tengo puesta en un servidor gratuito.
www.cafeteriatonik.mipropia.com
Gracias