[SOLUCIONADO] Problemas con mobile first design

guille_delfino · #1 (**permalink**) 25/01/2018, 09:45

Buenas tardes,

Estoy intentando crear un sitio first mobile pero tengo un problema al abrirlo en mi smartphone, me lo abre con la resolución de 960px en lugar de 480px; es decir, cuando abro el index desde mi smartphone, me muestra el fondo en amarillo en lugar de rojo como lo declaro en el css y no logro encontrar el error.

******** Este es el index.php:

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es-AR">
<head>
    <title>Mobile first</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/estilos.css">
</head>
<body>
    <h1>Mobile firest</h1>
</body>
</html>

****** Este es el estilo.css:

Código CSS:

Ver original@charset "UTF8";
 
body{
    background: red;
}
 
 
@media screen and (min-width: 480px){
 
body{
    background: blue;
}
 
}
 
@media screen and (min-width: 767px){
 
body{
    background: green;
}
 
}
 
@media screen and (min-width: 960px){
 
body{
    background: yellow;
}
 
}
 
@media screen and (min-width: 1280px){
 
body{
    background: grey;
}
 
}

g3kdigital · #2 (**permalink**) 25/01/2018, 20:49

Incluye este meta en tu head:

<meta name="viewport" content="width=device-width">

Y nos cuentas como te fue. Saludos.

guille_delfino · #3 (**permalink**) 26/01/2018, 16:19

Excelente!!!

Funcionó súper bien, muchas gracias por tu ayuda!