Código de CSS - Ejemplo de una web responsive

Imágen de perfil
Val: 672
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Ejemplo de una web responsivegráfica de visualizaciones


CSS

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

Versión 1
estrellaestrellaestrellaestrellaestrella(26)

Publicado el 13 de Junio del 2014gráfica de visualizaciones de la versión: Versión 1
97.873 visualizaciones desde el 13 de Junio del 2014
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 (26)

Jose
29 de Enero del 2015
estrellaestrellaestrellaestrellaestrella
gracias por el valioso aporte
Responder
7 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
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
4 de Diciembre del 2016
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
Daniel
9 de Marzo del 2017
estrellaestrellaestrellaestrellaestrella
kIERO LLORAR.. :)
Responder
Jorge
30 de Mayo del 2017
estrellaestrellaestrellaestrellaestrella
Seco! Te pasaste!

...moriré en paz
Responder
Alejandro
8 de Junio del 2017
estrellaestrellaestrellaestrellaestrella
Excelente, leí un montón sobre RESPONSIVE pero este ejemplo tan claro me sirvió un montón, Gracias
Responder
Imágen de perfil
29 de Agosto del 2017
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder
Ramón
30 de Noviembre del 2017
estrellaestrellaestrellaestrellaestrella
Soy nuevo en esto pero me gustó mucho .
Responder
Gustavo
26 de Diciembre del 2017
estrellaestrellaestrellaestrellaestrella
Muy sencillo y completo

Gracias...
Responder
JservyKhan
8 de Abril del 2018
estrellaestrellaestrellaestrellaestrella
Excelent .... thanks (is short and efective)
Responder
Ricard
17 de Abril del 2018
estrellaestrellaestrellaestrellaestrella
Una aportación imprescindible e impecable.
Muchas gracias por tu trabajo.
GENIAL.
Responder
Hendel
14 de Enero del 2019
estrellaestrellaestrellaestrellaestrella
Gracias por el ejemplo, ayuda
Responder
22 de Febrero del 2019
estrellaestrellaestrellaestrellaestrella
genial y funciona super bien muchas gracias!!!!
Responder
9 de Abril del 2019
estrellaestrellaestrellaestrellaestrella
Gracias por tu aporte , en realidad me pasa cuando voy hacia atrás en la web es de ir de una página dentro de la web a otra , se me descuadra el menú y el footer .lo pruebo a ver qué tal
Responder
16 de Mayo del 2019
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder
Imágen de perfil
11 de Octubre del 2019
estrellaestrellaestrellaestrellaestrella
Gracias.
Responder

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s2694