Ajustar tu blog o pagina para que se adapte a la resolución del dispositivo en el que se visualiza
Publicación relacionada: Crear tu propia versión móvil de tu página web o blog
Para un blogger o una persona que desea hacer un sitio web este tuto será fundamental, puesto a que; en plena era tecnológica, donde los llamados Smartphones, en primera instancia; han ganado un terreno enorme en cuanto a su porcentaje de adquisición, haciendo esto que mas personas opten por acceder a la web desde ellos, y este no es mas que un ejemplo entre tantos dispositivos y resoluciones que pueden existir, por ejemplo; tablets, iPods, TV's con acceso a internet, entre muchos.
Un webmaster no se puede dar el lujo de que su pagina web quizás se pueda distorsionar, particularmente a mi, la primera vez que me ocurrió, me sentí realmente incomodo, en vista de que no podía hacer nada, pasaba horas y horas preguntándome que hacer. Estaba en la universidad, pensaba en aquello, hacía deportes, pensaba en aquello, comiendo, pensaba en aquello y cuando se me mete algo en la cabeza, hasta no resolverlo, la mente no me deja de dar vueltas, espero que a ustedes les pase lo mismo, pues es el camino al éxito. Al momento en el que los usuarios ingresen a tu portal, notaran el cambio al comparar con otros portales que quizás no se adapten a las resoluciones, se sentirán satisfechos se saber que los tomas en cuenta, ademas; de que tengas conocimientos de que existe un mundo "multigadget" fuera de tu computador.
Primeramente, antes de mostrarle la pequeña linea de código que hace tal cosa, es importante evaluar nuestro código CSS, pues; dentro de este proceso, es quien da las ordenes de como debe adaptarse el estilo dependiendo del tamaño de la pantalla.
Ahora, supongamos que tenemos un DIV llamado contenedor con las siguientes propiedades en su estilo:
body #contenedor {
display:block;
background:yellow;
width:991px;
height: auto;
margin: 0 auto;
}
Vayamos dibujando esto en nuestra mente, hasta el momento tenemos un contenedor que se mostrará en bloque, cuyo color de fondo es amarillo, mide 991 píxeles de ancho, su altura sera automática, y estará centrado siempre en el medio de la pantalla.
Es momento de suponer, que estamos visualizando esta página web, con este contenedor en una pantalla de un Smartphone o tablet ¿Que ocurriría?
Sencillo, dudo mucho que la pantalla de un Smartphone o una tablet sobrepase los 500 píxeles de ancho, por lo tanto; el navegador crearía el scroll inferior haciendo que la pagina se vea enorme, pues; le has predefinido un ancho al contenedor que no puede ser visualizado completamente en la pantalla, y esto es lo que no queremos, la idea es que ese contenedor se vea completo en la pantalla sin necesidad de mover la pagina hacia a un lado.
Ahora ¿Que seria lo correcto?, usar este tipo de valores para las propiedades de ancho o alto.
body #contenedor {
display:block;
background:yellow;
width:89%;
height: auto;
margin: 0 auto;
}
Al implementar el valor en porcentaje, haces que el CSS no se enfoque en una resolución exacta, si tu resolución es de 800 píxeles, tomaría el 89% de la pantalla precisamente para mostrar el contenedor, lo mismo ocurrirá para teléfonos, tablets, televisores y cualquier otro dispositivo que ingrese a ella.
¡Pero momento! eso no es todo, aun falta el código de oro, el mas preciado y el que permite reconocer desde que dispositivo ingresó el usuario. Es un código sumamente corto, te sugiero que lo coloques debajo de los metatags en tu página, que se ubican en el <head> de la misma
<meta name="viewport" content="width=device-width"/>
Esta pequeña linea lo que realiza es detectar desde que dispositivo se ingreso al portal y cual es su resolución para adaptar los estilos CSS. Asi de sencillo, un pequeño tutorial para mis grandes amigos que se que los tenia olvidado, estoy de vuelta, y esta vez espero quedarme con ustedes, y disculpenme, todo este olvido es a causa de la universidad. ¡Saludos colegas!
Enlaces para compartir en tu blog o pagina web.
![[1] Crear una calculadora simple en Microsoft Visual Studio 2010 (El Diseño)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihK06o3qxRgndTN83gagg5xMy8Y0s4rg9GCiBabAgKpoFDpCUkp8Al_rfR6HKBuaEHmmst0IOnxKE7V2kHfX63AoPgzF_mZQ-nZ-Bkj4vdbhyphenhyphenPMU_bP1Dk_0ZJf_4_NgJh7dzseZHN7Okh/s72-c/calculadora.JPG "[1] Crear una calculadora simple en Microsoft Visual Studio 2010 (El Diseño)")
No hay comentarios :
Publicar un comentario