CSS - responsive para movil

   
Vista:

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


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>

inicio.css


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;
}

movil.css


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


SEGUNDO

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>

inicio.css


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
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

responsive para movil

Publicado por walter (47 intervenciones) el 29/02/2016 13:54:51
no entiendo mucho lo que haz querido hacer.
yo coloco un media queries por cada dispositivo que tengo en cuenta.
por qué tienes inicio.css y movil.css si puedes distribuirlos por ejemplo así:

para la general:

1
<link rel="STYLESHEET" type="text/css" href="estilos.css" />

dispositivos:

1
2
3
4
5
6
7
8
9
10
11
12
13
<!--320 + 480-->
<link href="320.css" rel="stylesheet" type="text/css"media="only screen and (max-width: 320px) " >
<link href="480.css" rel="stylesheet" type="text/css"media="only screen and (min-width: 321px) and (max-width: 480px) and (orientation : landscape)" >
 
<!--360 + 640-->
<link href="360.css" rel="stylesheet" type="text/css"media="only screen and (min-width: 360px) and (max-width: 640px) and (orientation : portrait)" >
<link href="360-landscape.css" rel="stylesheet" type="text/css"media="only screen and (min-width: 481px) and (max-width: 640px)and (orientation : landscape)" >
<!--768 -->
<link href="768.css" rel="stylesheet" type="text/css"media="only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : portrait)" >
<link href="768-landscape.css" rel="stylesheet" type="text/css"media="only screen and (min-width : 768px)and (max-width : 1024px) and (orientation : landscape)" >
 
<!--1280 max-->
<link href="1280.css" rel="stylesheet" type="text/css"media="only screen and (min-width: 1025px)and (max-width : 1440px)" >

fijate este ejemplo que carga diferentes resoluciones en la imagenes (una para escritorio y otra para moviles -resolucion y tamaño-)
http://sonidosdistantes.com.ar/pilcha/
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

responsive para movil

Publicado por DAVID (29 intervenciones) el 04/03/2016 08:11:42
Porque no usas Bootstrap? Con eso tendrías solucionado el tema responsive,y ademas tendrías montones de componentes para usar ya incluidos. Es una opción muy usada.

Un saludo,
David
paginas web economicas
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Manuel Sanchis

responsive para movil

Publicado por Manuel Sanchis (4 intervenciones) el 16/06/2016 11:58:01
si bootstrap es buena, y además no tienes que ir andando con codigos y demas. Yo también te la propongo
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar