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 |