Vamos a ver el enfoque de móvil first va a ser bastante similar a lo que vimos en el primer video donde
utilizábamos varios UIT-T.
Por lo tanto no será un video tan largo y de hecho el proyecto va a continuar pues va a utilizar este
enfoque y de hecho los dos primeros lo utilizan.
Bueno de hecho todos lo utilizan pues pero lo vas a poder practicar un poco más.
Ya en los siguientes vídeos vamos a abrir la tercer carpeta abrimos el índex y lo abrimos con laisser
para que cierre la anterior conexión.
A diferencia del otro mientras stock Frers una vez que estás contento con el diseño en tamaño grande
y haces ajustes a pequeño éste es un poco al revés porque más bien estás contento con cómo se ve aquí
y comienzas a agregar media queries para ir cambiando su apariencia conforme se va haciendo un poco
más grande la página.
Veamos un ejemplo ya lo vimos anteriormente abrir el CSS para ello se utiliza de nueva cuenta media
cuadra todo se utiliza Cuadri y colocamos width y digamos que ponemos 992 píxeles espacio de arrullar
me cuenta todo lo que coloques dentro de de acuerdo es lo que va a cambiar en esta resolución voy a
seleccionar la imagen y lo va a colocar un Wit de digamos 500 píxeles.
Después voy a colocarle un display Blok algo muy importante y lo vamos a ver al detalle más adelante.
Es que por ejemplo existen diferentes formas en que los elementos se ven una imagen tiene lo que se
conoce como un display inline.
Básicamente cuando un elemento tiene un display inline.
Cuando agregas dos se muestran dos o más se agregan uno al siguiente del otro muy similar a los enlaces
los enlaces se colocan uno frente al otro existen otra serie de elementos que tienen un display blog
como éste aquí lo puedes cambiar algo que puedes acerto cuando un elemento tiene display Block se colocan
de arriba hacia abajo.
Es algo muy importante por lo tanto esta imagen estaría de esta forma.
Lo que yo deseo es que tome todo el espacio disponible por lo tanto le pongo un display blog y lo voy
a centrar con margen cero auto si guardamos cambios y abrimos el proyecto puedes ver como si hago más
pequeño esto digamos que aquí estoy contento con que la imagen sea grande pero una vez llegando a 992
pixeles lo que quiero es que mi imagen mida 500 pixeles y esté centrada horizontalmente.
Llegando a este tamaño puedes ver que la imagen toma estos 500 pixeles y también se va a centrar y de
eso trata mobile first.
Tienes que estar contento.
Tienes que tener el diseño para un dispositivo móvil y después con mi Aquaris ir cambiando conforme
va creciendo lo que viene siendo la pantalla ya sea haciendo ajustes para una tablet para una computadora
o para una televisión.
Esta forma es la que se utiliza en todos los proyectos y todos los Frend work CSS ya sea por ejemplo
Wing ya sea vostra materialice Foundation todos los Frend worse s se utilizan en esta forma porque mi
opinión es mucho más sencilla.
Bueno no me pidieron mi opinión nada pero creo yo por eso se decidieron a hacerlo así porque es más
sencillo de implementar un poco un poco más lógico por así decirlo en el siguiente capítulo vas a continuar
con el siguiente proyecto estaremos viendo cómo integrar estos Aquaris para que no te tome tanto por
sorpresa y después se dará responsive el otro proyecto así que estos son los descuelgues es una forma
de crear tu sitio web responsive.
Si te confunden un poco es normal estás aprendiendo algo nuevo no dejes que esto te desanime y con la
práctica seguramente los vas a ir aprendiendo y para eso los siguientes capítulos todos tienen de Aquaris.