En este articulo vamos a ver lo fácil que es transformar un sitio web a Responsive Web Design haciéndolo adaptable y amigable para cualquier tamaño de pantalla tanto para dispositivos móviles, o tablet.

Para eso utilizamos las Medias Queries, que son estilos que que aplican según las reglas para los tamaños de pantallas. A esto se le acuña el tema de Responsive Web Design. 

<link href="estilos_movil.css" rel="stylesheet" media="handheld, only screen and (max-width:480px) " />

Y junto a ellos va la etiqueta meta con el valor a viewport, acompañado con la escala que se mostraran en pantalla los estilo que se apliquen. 

<meta name="viewport" content="width=device-width, initial-scale=1" >

Veamos un ejemplo : 

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="utf-8">
    <title>Estilos para móviles</title>

    <link href="estilos_movil.css" rel="stylesheet" media="handheld, only screen and (max-width:480px) " />

    <link href="estilos_escritorio.css" rel="stylesheet" media="screen and ( min-width: 481px) " />

    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

    <h1>El paisaje de modelo de color RGB</h1> Al mezclar los colores primarios de la luz, que son rojo, verde y azul ( RGB por sus iniciales en inglés: Red, Green, Blue), estamos en presencia del sistema de color aditivo En teoría todos los colores posibles pueden ser creados por la mezcla de estas tres luces de color y se les conoce como el espectro de color. En caso que ningún color de luz esté presente, se percibe el negro. Los colores primarios de luz tienen aplicación en los monitores de un ordenador, televisores, proyectores de vídeo y todos aquellos sistemas que utilizan combinaciones de materiales que fosforecen en el rojo, verde y azul.

    <img src="../image/Paisaje.jpg"> Se debe tener en cuenta que sólo con unos colores «primarios» ficticios se pueden llegar a conseguir todos los colores posibles. Estos colores primarios son conceptos idealizados utilizados en modelos de color matemáticos que no representan las sensaciones de color reales o incluso los impulsos nerviosos reales o procesos cerebrales. En otras palabras, todos los colores «primarios» perfectos son completamente imaginarios, lo que implica que todos los colores primarios que se utilizan en las mezclas son incompletos o imperfectos.

    <img src="../image/Paisaje.jpg">

</body>

</html>

Aquí los estilos para escritorio

body{
font-size: 12px;
font-family:sans-serif;
padding:30px;
background-color: black;
}
h1{
font-size: 20px;
color: white;
}
p{
color: white;
}

Y Aquí los estilos para Móviles.

body{
font-size: 18px;
padding: 0 10px;
background-color: green;
}

img{
width: 80%;
margin: auto;
display: block;
}

h1{
color: red;
}
p{
color: white;
}

Como vemos la misma página se ve visualmente diferente cuando se muestra en una móvil y en una pantalla de escritorio, en los estilos se modificó el tamaño de la imagen, cambiar el color de fondo, y de la tipografías.

nota