Embedded Files
Tutorialdel W3C
http://www.w3c.es/w3devcampus/cursos/w3c-responsive-web-design/
Este script cambia color de letra según 4 rangos de tamaño de pantalla.
<!DOCTYPE html> <html><head>
<style>
ul { color: red; }
@media screen and (max-width: 600px) and (min-width: 300px) {
ul { color:blue; }
}
@media screen and (max-width: 1200px) and (min-width: 600px) {
ul { color:black; }
}
@media screen and (max-width: 2000px) and (min-width: 1200px) {
ul { color:green; }
}
</style></head>
<!-------------------------Cuerpo del documento----------------->
<body>
<h1>Resize the browser window!</h1>
<ul>
<li><a>John</a></li>
<li><a>Mary</a></li>
<li><a>Amanda</a></li>
</ul>
</body>
</html>
Un ejemplo completo de media queries capta tamaños de 4 tipos de dispositivos.
<!DOCTYPE html> <html><head>
<style>
BODY{
background-color:YELLOW;
}
ul {
background-color:black;
color: yellow;
font-size:1.3em;
}
p::after {content: "Usted está utilizando una pantalla o navegador seteados entre 200 a 480 pixels, Probablemente un Smartphone - Le ofrecemos texto con fondo amarillo así no cansa su vista";
font-size:1.4em;
}
@media screen and (max-width: 1024px) and (min-width: 480px) {
BODY{
background-color:PINK;
}
ul { color:white;
background-color:red;
font-size:1.2em;
}
p::after {content: "Usted está utilizando una pantalla o navegador seteados entre 480 y 1024 pixels, probablemente una Tablet - Le ofrecemos texto con fondo rojo para una mejor legibilidad"; font-size:1.3em; }
}
@media screen and (max-width: 1280px) and (min-width: 1024px) {
BODY{
background-color:DARKGREEN;
}
ul { color:purple;
background-color:lightgreen;
font-size:1.1em;
}
p::after {content: "Usted está utilizando una pantalla o navegador seteados entre 1024 y 1280 pixels, probablemente una Notebook - Le ofrecemos texto con fondo verde para su relax.";
font-size:1.2em;
}
}
@media screen and (max-width: 2000px) and (min-width: 1200px) {
body {background-color:#f5f5f5;}
ul { color:black;
font-size:;
background-color:lightgray;
font-size:1em;
}
p::after {content: "Usted está utilizando una pantalla o navegador seteados entre 1280 y 2000 pixels, probablemente una PC de escritorio - Le ofrecemos un texto en colores sobrios porque a usted le gustan las cosas a lo grande.";
font-size:1.1em;
}
}
</style></head>
<!-------------------------Cuerpo del documento----------------->
<body>
<h2 style="background-color:#ccc";>Redimensiona la pantalla del navegador o míralo en diversos dispositivos!</h2>
<P><STRONG STYLE="BACKGROUND-COLOR:YELLOW">HOLA! </STRONG><br> </P><br>
<ul>
<li><a>John</a></li>
<li><a>Mary</a></li>
<li><a>Amanda</a></li>
</ul>
</body>
</html>
Page updated
Google Sites
Report abuse