Es una realidad actual que la gente accede a contenido web a través de dispositivos móviles como telefonos celulares, tablets y laptops (ó netbooks). Para desarrollador ó empresa para la que trabajamos es la que decidirá si el contenido de su web estará disponible para dispositivo movil en un subdominio, lo cual incluye un trabajo extra. Sin embargo haciendo un buen uso de HTML y CSS podemos aplicar ciertas reglas a nuestro estilos ó diseños para que según el tamaño de la pantalla optimice el contenido a mostrar, independientemente desde donde acceda el usuario final, sea un móvil o tablet, etc.
Muchas web y blogs han optimizado sus diseños para que no se distorcionen sin importar desde donde se accedan, así se ahorran el tener un subdominio (u otro lugar) para versión movil.
El diseño propuesto con HTML 5 y CSS 3 también nos permite un diseño redimensionable para contenido movil. El ejemplo es un esquema sencillo, ustedes pueden completarlo luego, pero es funcional. Veamos la hoja de estilo que hace todo el proceso, en la se incluyen breves explicaciones.
/************************************************************************************
ancho de pagina menor que 960px
*************************************************************************************/
@media screen and (max-width: 960px) {
/* color de borde rojo solo de ejemplo*/
/* envoltura principal */
#page_wrap {
width: 95%;
}
/* contenido de la izquierda */
#main_content_right_side {
width: 68%;
border:1px solid red;
}
/* contenido de la derecha */
#right_sidebar {
width: 20%;
border:1px solid red;
}
/* incrustar videos */
.video embed,
.video object,
.video iframe {
width: 100%;
height: auto;
}
}
/************************************************************************************
ancho de pagina menor que 650px
*************************************************************************************/
@media screen and (max-width: 650px) {
/* borde de color verde solo de ejemplo*/
/* cabecera */
#header {
height: auto; /* alto automatica para menu */
}
/* menu navegacion */
#main-nav {
position: static; /* posicion estatica */
}
/* la idea es que se puede aplicar estilo a otros elementos segun tamaño */
/* contenido de izquierda */
#main_content_right_side {
width: auto;
float: none;
margin: 20px 0;
border:1px solid green;
}
/* contenido de derecha */
#right_sidebar {
width: 100%;
margin: 0;
float: none;
border:1px solid green;
}
/* incrustar videos */
.video embed,
.video object,
.video iframe {
min-height: 250px;
}
}
/************************************************************************************
ancho pagina menor que 560px
*************************************************************************************/
@media screen and (max-width: 480px) {
/* disable webkit text size adjust (for iPhone) */
html {
-webkit-text-size-adjust: none;
}
/* menu navegacion */
#main-nav a { /* en este caso el tamaño del texto */
font-size: 90%;
padding: 10px 8px;
}
/* contenido de izquierda */
#main_content_right_side {
border:2px solid yellow;
}
/* contenido de derecha */
#right_sidebar {
border:2px solid yellow;
}
/* se puede aplicar otros estilos para no mostrar ciertos elementos
en pantallas de tamaño pequeño */
}
En el demo notará que el ancho de la página web se muestra a medida se redimensiona el navegador y verá que el color de borde de las dos columnas principales de contenido cambian de azul, rojo, verde y amarillo.
Ver demostración de Redimensionar pagina web con HTML5 y CSS 3.
Fuente : Ionut Carst