responsive para movil
Publicado por eduardo (1 intervención) el 28/02/2016 11:56:04
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
inicio.css
movil.css
SEGUNDO
index.html
inicio.css
un saludo y gracias
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
index.html
1
2
3
4
5
6
7
8
9
10
11
12
<!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>
1
2
3
4
5
6
7
8
body {background-image: url(images/fondo.jpg);
background-position: top center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color:#596054;
}1
2
3
4
body {background-image: url(images/inicio-movil.jpg);
background-position: top left;
}index.html
1
2
3
4
5
6
7
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>resposive</title>
<link rel="stylesheet" href="inicio.css">
</head>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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
Valora esta pregunta
0
