<!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-radi$
}
<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-radi$
}
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;
}
nav ul li a:hover
{
color:red;
}
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><a href="">menu 1</li>
<li><a href="">menu 2</li>
<li><a href="">menu 3</li>
<li><a href="">menu 4</li>
</ul>
<ul>
<li><a href="">menu 5</li>
<li><a href="">menu 6</li>
<li><a href="">menu 7</li>
<li><a href="">menu 8</li>
</ul>
</nav>
<section>
<p>
<b><meta name="viewport" content="width=device-width, initial-scale=1.0" /></b>
<br>Este meta tag se utiliza para controlar cómo aparecerá el contenido HTML en los navegadores móvile$
</p>
<p>
La expresión <b>@media</b> de css3, es fundamental. Nos permite estableces condiciones desde CSS para $
<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 $
<br>b) <b>width y height</b> Ancho y alto del dispositivo, móviles y tablets (podemos $
<br>c) <b>orientation</b> Orientación del móvil o tablet (para panorámico utilizaremos$
</ul>
</p>
<p>
<b>@media screen and (max-width:980px)</b> Se utiliza para definir un tamaño o inferior. En es$
</p>
</p>
</section>
<aside>Aside</aside>
<footer>
<a href="http://www.lawebdelprogramador.com">http://www.lawebdelprogramador.com</a>
</footer>
</div>
</body>
</html>
*********************************************************
EL MISMO EJEMPLO DE
PAGINA WEB RESPONSIVE PERO SENCILLO.
<!DOCTYPE html>
<html lang="es">
<head>
<meta
charset="utf-8">
<style>
.container {
width: 90%;
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: left;
width: 20%;
}
espacio {
margin-top : 5px;
float: left;
width: 2%;
}
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;
}
nav ul li
a:hover
{
color:red;
}
footer {
margin:10px;
text-align:center;
clear:both;
}
</style>
</head>
<body>
<div
class="container">
<header>
<h1>Ejemplo web responsive</h1>
<header>
<nav>
<ul>
<li><a href="">menu 1</li>
<li><a href="">menu 2</li>
<li><a href="">menu 3</li>
<li><a href="">menu 4</li>
</ul>
<ul>
<li><a href="">menu 5</li>
<li><a href="">menu 6</li>
<li><a href="">menu 7</li>
<li><a href="">menu 8</li>
</ul>
</nav>
<section>
<p>
<b><meta name="viewport"
content="width=device-width, initial-scale=1.0" /></b>
<br>Este meta tag se utiliza para controlar cómo aparecerá
el contenido HTML en los navegadores móvile$
</p>
<p>
La expresión <b>@media</b> de css3, es fundamental.
Nos permite estableces condiciones desde CSS para $
<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 $
<br>b) <b>width y height</b>
Ancho y alto del dispositivo, móviles y tablets (podemos $
<br>c) <b>orientation</b>
Orientación del móvil o tablet (para panorámico utilizaremos$
</ul>
</p>
<p>
<b>@media screen and (max-width:980px)</b> Se
utiliza para definir un tamaño o inferior. En es$
</p>
</p>
</section>
<espacio><p>
</p></espacio>
<aside>Aside</aside>
<footer>
<a
href="http://www.lawebdelprogramador.com">http://www.lawebdelprogramador.com</a>
</footer>
</div>
</body>
</html>
Comentarios
Publicar un comentario