Problema con Pagina web en celulares Resolucion de pantalla. - Respuesta
Publicado por
Victor (1 intervención) el 25/07/2017 16:55:20
Hola, yo también estoy en proceso de eterno aprendizaje, quizás te sirva lo que he implementado en mi proyecto.
1. Lo primero que yo haría es separar el código html del css (lo digo por si tienes el código en el mismo archivo).
2. Una buena práctica sería tener un archivo css para el diseño básico de tu html y otro para el estilo responsive (responsive.css por ejemplo)
3. En tu archivo html debes hacer referencia al css incluyendo dentro del head <link rel="stylesheet" href="css/responsive.css">
4. Es importante que además incluyas tambien <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> que es una etiqueta HTML5 y sirve para optimizar los sitios para móviles, esta etiqueta ayuda a definir el ancho, alto y escala del área usada por el navegador para mostrar el contenido.
5. Una vez que haz hecho esto, ya podrás pasar al archivo responsive.css para editarlo, antes de ello vale la pena aclarar que cuando comencé a aprender esta técnica, me encontraba con el dilema de saber con qué resoluciones de pantalla trabajar, y dediqué un montón de tiempo a leer información sobre los tamaños para cada dispositivo, sin embargo muy rápidamente aparecían nuevos dispositivos que me obligaban a modificar el código, por lo que en vez de trabajar para dispositivos en específicos, opté por hacer que mi página se viera bien en cualquier parte. Para ello trabajo con navegadores que poseen herramientas para desarrolladores, las que me permiten ir reduciendo la resolución de la ventana y ver como luce mi sitio en todos los modos.
6. Bueno dicho esto, volvamos al archivo responsive.css. Lo que yo hago es usar media queries que, por nombrarlas de algún modo, son como un módulo CSS3 que permite adaptar la representación del contenido a las características del dispositivo. las media queries dejan que la presentación del contenido se adapte a un rango específico de dispositivos de salida sin tener que cambiar el contenido en sí, y básicamente son expresiones que se resuelven como verdaderas o falsas y dependiendo de ello se ejecuta o no el código que contienen
7. Yo comienzo escribiendo @media only screen and (min-width:[Aquí va el ancho mínimo]px) and (max-width:[Aquí va el ancho máximo]px) { (sin los corchetes). Con esto le estarás indicando al navegador que aplique el estilo definido dentro de esta instrucción sólo si el dispositivo está dentro del rango establecido. Puedes ir definiendo más instrucciones según veas que tu sitio se vea de forma inadecuada.
8. Tambien existen instrucciones para determinar si el usuario tiene el dispositivo de forma vertical y horizontal, o si está viendo tu página desde un televisor, de todos modos ya puedes buscar más información al respecto.
9. Lo siguiente es definir los estilos css que quieres que se apliquen para este rango de resolución, puedes reducir las imágenes, cambiar su alineación, redistribuir contenidos y todo el sinfin de recursos que te ofrece css3
Espero que te haya servido mi sugerencia. Si hay algún experto en la materia que considere que lo que he dicho es incorrecto, le agradecería expresarlo, de esta forma yo también seguiré enriqueciendome.
