En este video vamos a ver el enfoque desde estoc first vamos a abrir lo que viene siendo la segunda
carpeta 0 2 abrimos el Index y voy a darle botón derecho y abrir con Live Server eso cierra la otra
página por así llamarlo y habrá una nueva anteriormente vimos que nuestro código utilizaba una sintaxis
que decía Minuit ese enfoque es más utilizado en mobile first First es un poco diferente.
Vamos a abrirse CSS lo que viene siendo un archivo de estilo si damos un poco de scroll en la parte
inferior a colocar el código.
Básicamente cómo funciona Desktop first de la siguiente forma construyes tu sitio y comienzas a hacer
ajustes pero hacia abajo es decir dices Bueno yo estoy contento en cómo se ve en esta resolución se
ve bastante bien y comienzas a agregar los Aquaris de un dispositivo más grande más pequeño.
Veamos cómo es porque si puede ser un poco confuso.
Básicamente sigues utilizando envidié QWERTY pero en lugar de Minuit utilizas Macs width y le colocas
el tamaño digamos 800 píxeles.
Voy a seleccionar el H1 y voy a colocar bonsais 3 RAM entonces si guardamos cambios puedes ver que no
cambiaría nada la apariencia en lo que viene siendo el tamaño de escritorio por qué.
Qué comienzas a aplicar de esto una vez que estás contento con el diseño en el escritorio y agregas
estos acuerdos para ir cambiando su apariencia en pequeño para ver estos cambios tendrás que hacerlo
más pequeño.
Por ejemplo si voy a abrir lo que viene siendo la regla que teníamos que mostrar anteriormente puedes
ver que si doy un poco de scroll una vez que llego a los 800 voy a tener un pequeño cambio y eso pasa
porque este selector esté de acuerdo y dice bueno de cero hasta 800 píxeles aplícala este tamaño entonces
si lo hacemos más pequeño pues sigue aplicándose porque de cero hasta 800 se aplica esta regla que tenemos
aquí un poco diferente al otro porque el otro sí recuerdas mientras estuviera por fuera de media query.
Eso quiere decir que va desde cero hasta cualquier tamaño entonces eso sería su diferencia principal.
Este personalmente casi no me gusta utilizarlo se me hace muy confuso pero así es la sintaxis.
Ahora veamos otro ejemplo vamos a agregar un segundo a mi idea Cuadri media Max y ponemos por ejemplo
500 píxeles seleccionarla un nuevo iPhone 6 llegamos dos Rubem para que se vea el cambio.
Entonces tres RAM Fram y el otro de 3 4 ram entonces vamos a abrir lo que viene siendo nuestro proyecto
aquí aparece 4 ram no entra ninguno de estos dos pero si lo hacemos más pequeño vamos a tener nuestro
primer cambio porque llegamos a los 800 y se aplica tres RAM.
Pero si le doy más scroll se va a hacer más pequeño porque entre los 500 píxeles y por lo tanto se hace
de dos Rubem digamos que me gustaría ser más pequeño en la imagen en este dispositivo es decir es muy
pequeño en un teléfono móvil aquí podría colocar un MG para la imagen y ponerle un width de 300 píxeles
o 30 Rubem quizás es más pequeño pero si lo hago un poco más grande ya no se ve afectado por qué.
Por qué dice hasta 500 píxeles y como aquí ya pasamos de los 500 a esta regla simplemente ignorada.
No hay ninguna otra que diga que tenga que tener determinado tamaño más que la que dice.
MG Max Schmidt entonces esa parte ya no se ve afectada es decir esta parte de aquí ya no es tomada en
cuenta también por ejemplo digamos que si lo haces más pequeño y te dicen bueno no quiero que este texto
toque las orillas porque se ve un poco raro también tendrías que hacerlo dentro del cuerpo por ejemplo
entrada aflojes la clase UIT-T 90 por ciento y un margen cero auto y eso va a ser que se centre un poco
el contenido personalmente de nueva cuenta casi no utilizo esta metodología porque para mí es un poco
más confuso a mi usualmente me gusta utilizar móvil first pero recuerda Comienzas teniendo o comienzas
con tu diseño cuando estás feliz con él en un dispositivo grande y de ahí comienzas a agregar media
superior haciendo ajustes hacia más pequeño en el siguiente video vamos a ver el otro que vendría siendo
un móvil Fears es mucho más popular así que veámoslo en el siguiente video.