Código de CSS - Ejemplo de una web responsive

Imágen de perfil

Ejemplo de una web responsivegráfica de visualizaciones


CSS

estrellaestrellaestrellaestrellaestrella(13)
Publicado el 13 de Junio del 2014 por Xavi
29.616 visualizaciones desde el 13 de Junio del 2014. Una media de 231 por semana
Simple código que muestra como hacer una web responsive a varias resoluciones de pantalla.

Versión 1
estrellaestrellaestrellaestrellaestrella(13)

Publicado el 13 de Junio del 2014gráfica de visualizaciones de la versión: Versión 1
29.617 visualizaciones desde el 13 de Junio del 2014. Una media de 231 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

Puedes ver el ejemplo aquí
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
	<style>
	.container {
		width:996px;
		margin:0px auto;
		font-size:1em;
	}
	section,aside {
		padding: 10px;
		background:#ccc;
		-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;border-radius:5px;
	}
	section {
		float: left;
		width: 70%;
	}
	aside {
		float: right;
		width: 25%;
	}
	nav {
		overflow: hidden;
	}
	nav ul {
		list-style-type:none;
		float:left;
		padding:0px;
	}
	nav ul li {
		float:left;
		padding:3px 10px;
		margin:2px;
		background:#ccccff;
		-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;border-radius:5px;
	}
	footer {
		margin:10px;
		text-align:center;
		clear:both;
	}
 
	/* para 980px o menos */
	@media screen and (max-width:980px) {
		.container {
			width:98%;
		}
		section {
			width:68%;
		}
	}
 
	/* para 700px o menos */
	@media screen and (max-width:700px) {
		aside,section {
			float:none;
			width:96%;
		}
		nav, section {
			font-size:1.2em;
		}
		aside {
			margin-top:5px;
		}
		nav ul {
			float:none;
			clear:both;
		}
	}
 
	/* para 480px o menos */
	@media screen and (max-width:480px) {
		aside {
			display:none;
		}
		nav, section {
			font-size:1.5em;
		}
		section {
			width:94%;
		}
		nav ul {
			float:left;
			clear:none;
			width:50%;
		}
		nav ul li {
			float:none;
		}
	}
	</style>
 
</head>
 
<body>
 
<div class="container">
	<header>
		<h1>Ejemplo web responsive</h1>
	<header>
 
	<nav>
		<ul>
			<li>menu 1</li>
			<li>menu 2</li>
			<li>menu 3</li>
			<li>menu 4</li>
		</ul>
		<ul>
			<li>menu 5</li>
			<li>menu 6</li>
			<li>menu 7</li>
			<li>menu 8</li>
		</ul>
	</nav>
 
	<section>
		<p>
			<b>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;</b>
			<br>Este meta tag se utiliza para controlar cómo aparecerá el contenido HTML en los navegadores móviles. Así nos aseguramos que el contenido se ajusta al ancho del dispositivo. En este caso estamos indicando que el contenido tendrá el ancho del dispositivo y que la escala inicial es de 1
		</p>
 
		<p>
			La expresión <b>@media</b> de css3, es fundamental. Nos permite estableces condiciones desde CSS para conocer el dispositivo desde el se accede a nuestra web y aplicar nuevos estilos CSS. Por ejemplo: podemos eliminar el sidebar de nuestro blog si el navegador mide menos de 600px.
			<br>Tenéis la info más detallada en: http://www.w3.org/TR/css3-mediaqueries/
			<p>
				Las propiedades que más nos interesan son las siguientes:
				<ul>
					a) <b>width y height</b> Ancho y alto del navegador (podemos añadir el prefijo min- o max-)
					<br>b) <b>width y height</b> Ancho y alto del dispositivo, móviles y tablets (podemos añadir el prefijo min- o max- )
					<br>c) <b>orientation</b> Orientación del móvil o tablet (para panorámico utilizaremos orientation:portrait, para vertical orientation:landscape)
				</ul>
			</p>
 
			<p>
				<b>@media screen and (max-width:980px)</b> Se utiliza para definir un tamaño o inferior. En este caso, para 980px o menos.
			</p>
		</p>
	</section>
	<aside>Aside</aside>
 
	<footer>
		<a href="http://www.lawebdelprogramador.com">http://www.lawebdelprogramador.com</a>
	</footer>
</div>
</body>
</html>



Comentarios sobre la versión: Versión 1 (13)

Jose
29 de Enero del 2015
estrellaestrellaestrellaestrellaestrella
gracias por el valioso aporte
Responder
Dante
07 de Marzo del 2015
estrellaestrellaestrellaestrellaestrella
Gran aporte... muchísimas gracias.
Responder
Joaquin
30 de Marzo del 2015
estrellaestrellaestrellaestrellaestrella
Viejo, espectacular su aporto... corto y preciso, muchas gracias
Responder
Imágen de perfil
Angel Komander
18 de Abril del 2015
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder
felip
27 de Mayo del 2015
estrellaestrellaestrellaestrellaestrella
gracias buen aporte
Responder
Oscar
16 de Septiembre del 2015
estrellaestrellaestrellaestrellaestrella
PUTO Web MAster eres la Hostia me salvaste el pellejo cabron mil felicidades eres GENIAL!!!
Responder
El Navegante
23 de Septiembre del 2015
estrellaestrellaestrellaestrellaestrella
Estoy de acuerdo con Joaquín: "corto y preciso."

Tras haber 'empleado' dos días con otros ejemplos que incluso llevan videos el tuyo está funcionando a la primera.
Pregunto: ¿Tienes algo similar para que al mostrarse en un móvil la parte del nav salga con el icono correspondiente y al pulsarlo se abra.? Ver: https://www.youtube.com/watch?v=EB4BG3QZn3o

Entiendo que hay librerías con tropecientos iconos; Pero ¿podrías enviarme solo los que se usan para este tema? Disclupa si te robe mucho tiempo.

De antemano.... MUCHAS GRACIAS.
Responder
joseluis
23 de Mayo del 2016
estrellaestrellaestrellaestrellaestrella
excelente
Responder
ww
23 de Junio del 2016
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder
Víctor
21 de Septiembre del 2016
estrellaestrellaestrellaestrellaestrella
Gracias. Muy clarificador
Responder
eric sanchez
28 de Septiembre del 2016
estrellaestrellaestrellaestrellaestrella
Excelente no hay otra palabra
Responder
Nicolas
10 de Noviembre del 2016
estrellaestrellaestrellaestrellaestrella
Exelente aporte . muchisimas gracias.
Responder
Cesar
Hace 5d
estrellaestrellaestrellaestrellaestrella
Muy buen aporte pero aun necesito un poco de ayuda en mi web, quien por favor le hecha una mano a este novato, gracias
Responder

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios

http://lwp-l.com/s2694