Foros del Web » Creando para Internet » CSS »

responsive para movil

Estas en el tema de responsive para movil en el foro de CSS en Foros del Web. Buenas He probado dos codigos para que un fondo de pantalla sea responsive y que al ver la web desde el movil cargue una imagen ...
  #1 (permalink)  
Antiguo 27/02/2016, 04:39
 
Fecha de Ingreso: febrero-2016
Mensajes: 2
Antigüedad: 8 años, 8 meses
Puntos: 0
responsive para movil

Buenas

He probado dos codigos para que un fondo de pantalla sea responsive y que al ver la web desde el movil cargue una imagen distinta mejor adaptada.

mi sorpresa es que funciona cuando modifico el tamaño de la ventana en el pc, pero cuando lo miro desde el movil carga la imagen inicial

PRIMERO

index.html

<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>resposive</title>
<link rel="stylesheet" href="inicio.css">
<link rel="stylesheet" media="only screen and (max-width: 480px)" href="movil.css">

</head>
<body>
</body>
</html>

inicio.css

body {
background-image: url(images/fondo.jpg);
background-position: top center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color:#596054;
}

movil.css

body {
background-image: url(images/inicio-movil.jpg);
background-position: top left;
}


SEGUNDO

index.html

<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>resposive</title>
<link rel="stylesheet" href="inicio.css">
</head>

inicio.css

body {
background-image: url(images/fondo.jpg);
background-position: top center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color:#596054;
}
@media only screen and (max-width: 767px) {
body {
background-image: url(images/inicio-movil.jpg);
background-position: top left;
}
}


un saludo y gracias
  #2 (permalink)  
Antiguo 28/02/2016, 22:19
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 14 años, 2 meses
Puntos: 63
Respuesta: responsive para movil

Hola, nunca olvides colocar la etiqueta <meta name="viewport" content="width=device-width, initial-scale=1"> para la detección de dispositivos.
  #3 (permalink)  
Antiguo 29/02/2016, 05:26
 
Fecha de Ingreso: febrero-2016
Mensajes: 2
Antigüedad: 8 años, 8 meses
Puntos: 0
Respuesta: responsive para movil

muchas gracias, ya funciona.

Etiquetas: background, color, html, movil, responsive, width
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 02:17.