En diseño responsivo se busca que la pagina se adapte de mejor forma a los diferentes dispositivos. Ya que si creas un html y lo visualizas en un viewport de dispositivo mobil notaras que las dimensiones de los elementos se escalan al tamaño dispositivo, es decir que apenas y se alcanza a leer.
El primer paso para solucionar esto es especificando en <meta> que para viewport el ancho sera: width=device-width. Con solo escribir esto la pagina se auto ajustara, hasta cierto punto, a los diferentes tamaños de viewport en los que la visualicemos.
Ahora te invito a ver el video ( ^__^)/
Aqui te muestro un fragmento del css que uso en la pagina de este curso. Como puedes ver uso univades relativas ya que estas se ajustan mejor ante la variedad de diferentes tamaños de viewport.
| unidad | definicion |
|---|---|
| vw | relativo a 1% de viewport-width |
| vh | relativo a 1% de viewport-height |
| vmin | relativo a 1% de la dimension mas chica del viewport |
| vmax | relativo a 1% de la dimension mas grande de viewport |
| em | relativo a tamaño de la fuente del elemento |
| rem | relativo a tamaño de la fuente de root |
Tambien se puede notar que practicamente se modifica cualquier propiedad que se desee con tal de conseguir el resultado que uno busca en dispositivos mobiles, desde tamaño de fuente, dimensiones, hasta ocultar secciones completas con display:none; entre otras propiedades.
Boston, Massachusetts
sinoplecarballo@gmail.com
Martin Carballo
@shur_d_firsiel