Cómo diseñar una página para que se adapte a cualquier tamaño de pantalla

Como puedo hacer que el contenido se ajuste a cualquier tamaño de pantalla y zoom que se le pueda dar bueno básicamente tengo unos css que están en pixeles no se si es necesario cambiarlos a porcentajes pero se me dificulta saber que porcentaje es equivalente a esos pixeles

2

2 respuestas

Respuesta
2

Para empezar te recomiendo utilizar http://getbootstrap.com/  o http://materializecss.com/  te ayudaran de una forma sorprendente si quieres soluciones rápidas te serán de gran ayuda.

Saludos y gracias por visitar http://develoteca.com y suscribirte a : https://www.youtube.com/user/dimit28  

Respuesta
1

Eso se llama, en el mundo del desarrollo web: Responsive Design.

No soy un experto en diseño de web's (Front-end) más me interesa el lado servidor y validación (Back-end) pero debido a las necesidades (y que no podemos darnos el lujo de sólo arraigarnos a una sola cosa habiendo mucho que aprender) he aprendido poco a poco de ello, pero también he encontrado herramientas que facilitan el trabajo de hacer diseños responsives o adaptables.

Entre estos métodos está el de grillas (grids), que lo que hace es darle una división en filas y columnas a tu web (una plantilla .css en pocas palabras) que podrás usar de la forma que más te convenga.

Yo uso marcos de trabajo (frameworks) ya que no me es de mucho interés la teoría de los estilos, etc; como MaterializeCSS (que está muy bueno) o Material Design Lite. Así que puedes buscar información sobre los gribs, y también puedes usar templates como Skeleton (que también está muy bueno), en el mismo MaterializeCSS/Grib, Materia Design Lite/Gribs u otros como en esta lista.

Por otro lado, si quieres saber toda la ciencia detrás del Responsive, entonces tienes que ver como trabajan los Framework que introdujeron el diseño adaptable. Lo hacen con porcentajes, valores máximos y mínimos para el alto y ancho. Hay buenos tutoriales de ello, busca sobre Responsive Design, y no dejes de practicar.

Añade tu respuesta

Haz clic para o

Más respuestas relacionadas