Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Problemas con mobile first design

Estas en el tema de Problemas con mobile first design en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 25/01/2018, 09:45
Avatar de guille_delfino  
Fecha de Ingreso: julio-2014
Ubicación: Buenos Aires, Argentina
Mensajes: 125
Antigüedad: 7 años, 5 meses
Puntos: 4
Exclamación Problemas con mobile first design

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
  1. <!DOCTYPE html>
  2. <html lang="es-AR">
  3.     <title>Mobile first</title>
  4.     <link rel="stylesheet" href="css/reset.css">
  5.     <link rel="stylesheet" href="css/estilos.css">
  6. </head>
  7.     <h1>Mobile firest</h1>
  8. </body>
  9. </html>


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

Código CSS:
Ver original
  1. @charset "UTF8";
  2.  
  3. body{
  4.     background: red;
  5. }
  6.  
  7.  
  8. @media screen and (min-width: 480px){
  9.  
  10. body{
  11.     background: blue;
  12. }
  13.  
  14. }
  15.  
  16. @media screen and (min-width: 767px){
  17.  
  18. body{
  19.     background: green;
  20. }
  21.  
  22. }
  23.  
  24. @media screen and (min-width: 960px){
  25.  
  26. body{
  27.     background: yellow;
  28. }
  29.  
  30. }
  31.  
  32. @media screen and (min-width: 1280px){
  33.  
  34. body{
  35.     background: grey;
  36. }
  37.  
  38. }
__________________
Atentamente,

Guillermo Delfino
[email protected]

Última edición por pzin; 30/01/2018 a las 01:26 Razón: Highlight código.
  #2 (permalink)  
Antiguo 25/01/2018, 20:49
Avatar de g3kdigital  
Fecha de Ingreso: noviembre-2013
Ubicación: En mi apartamento en bogotá
Mensajes: 208
Antigüedad: 8 años, 2 meses
Puntos: 39
Respuesta: Problemas con mobile first design

Incluye este meta en tu head:

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

Y nos cuentas como te fue. Saludos.
__________________
Puedes ser el tipo de persona que se amarga por lo inevitable o aceptar el reto de superarse siempre e ir a la par con el progreso.

WEB: G3K.co | codepen.io/g3kdigital
  #3 (permalink)  
Antiguo 26/01/2018, 16:19
Avatar de guille_delfino  
Fecha de Ingreso: julio-2014
Ubicación: Buenos Aires, Argentina
Mensajes: 125
Antigüedad: 7 años, 5 meses
Puntos: 4
Respuesta: Problemas con mobile first design

Excelente!!!

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

Guillermo Delfino
[email protected]

Etiquetas: design, mobile
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 09:40.