Una vez listo el diseño para el dispositivo móvil vamos a enfocarnos en la parte más grande.
Primer paso.
Puedes ver que esta barra puede ser que se coloca del lado izquierdo y del lado derecho.
Por lo tanto vamos a abrir nuestro código ya no voy a ser más grande aquí.
Usar scroll puedes ver que no tenemos ninguna barra aún y eso es porque por default los elementos los
dips pueden ser que tenemos la barra cada uno de estos elementos por ejemplo SH1 y este se van a colocar
uno arriba del otro por lo tanto vamos irakí aquí a esta parte después del switcher sigue nuestra barra
se va a poner.
De hecho lo va a poner aquí antes para agrupar un poco mejor nuestro código.
Arroba Milia y ponemos nuestro paréntesis y nuestras llaves.
Aquí es donde la especificamos el tamaño recuerda esto lo defines tú y por lo tanto yo lo voy a poner
desde la Tablet 7 6 8 pixeles y después el selector que vendría siendo la barra aquí la vamos a poner
un display Flex si guardas cambios pues de esta forma más pequeño que de esta forma uno debajo del otro
pero un poco más grande entra a nuestro cuerpo y la aplica display Flex se ve de esta forma.
Después vamos a colocar uno para un lado y otro para el otro yo contén spaces between.
Como vimos anteriormente ya lo coloca de esta forma.
Entonces puedes ver que queda uno del lado izquierdo y otro lado derecho no es tan así uno frente al
otro porque eso es selector de navegación pero hemos posicionado correctamente los elementos y puedes
ver la lógica detrás de esto queda bastante bien.
Ahora puedes ver que aquí puse el Miyake y muchos tutoriales que te vas a encontrar seguramente que
grandes bloques de video Aquaris con diferentes tamaños.
Eso no está bien no debe de hacerse así nunca lo recomendable por orden en lo que viene siendo mide
Aquaris es que vayas reescribiendo conforme se va presentando un cambio es decir en estas pequeñas partes.
Por qué.
Porque lo que viene siendo el CSS y el HTML se van ir mostrando conforme el navegador va descargando
la página tras ver aplicando lo que vienen siendo los estilos de aquí de arriba hacia abajo.
Y si tienes un bloque muy grande con 800 líneas de CSS para el dispositivo grande un escritorio pues
esas líneas van a estar hasta el final y el usuario va a ver una versión como un flash de lo que viene
siendo el dispositivo pequeño y después se va a ajustar a grande y eso es una muy mala experiencia de
usuario.
De esta forma como yo escribo como te recomiendo que los escribas si escribes más de Aquaris pero es
mucha mejor la experiencia del usuario ahora estar escribiendo esté de acuerdo y todo el tiempo pues
si es un poco cansado pero el editor te permite crear tus propios snippets presiona comanche coman zip.
Si estás en Windows Control SIP te va a aparecer un menú como éste.
En mi caso puedes ver que está en inglés pero puedes buscar usuarios si lo tienes en español o si está
en inglés búscalo como user y viene configurar snippets de usuario entonces busca usuarios de snippets
o snipes de usuario.
Algo similar en español y da clic ahí le quita preguntar para qué quieres que les snippets.
De esa forma por ejemplo puedes crear un snippets para CSS que únicamente cuando el archivo sea CSS
se pueda utilizar de otra forma.
Vas a tener un revólver o snippets aquí vamos a ponerse.
Ese es el que elige aquí y abre este pequeño archivo Jayson.
Aquí te viene lo que viene siendo un ejemplo de un snippets.
Pero bueno vamos a crear nuestros propios naipes de aquí abajo.
Este es un archivo Jayson por lo tanto requiere comillas dobles y el primer paso es darle un nombre.
De esta forma los vas a agrupar media espacio y por ejemplo importante que utilices estas comillas dobles
porque comillas sencillas no va a funcionar dos puntos abrimos llaves y queremos utilizar un prefijos.
Este prefijo va a decir o va a ser la forma en la que vas a utilizar este snippets a aquí MQ para poder
escribir únicamente MQ y aparezca snippets el prefijo va a ser MQ y después viene el body y el body
es la parte que va a verse es lo que se va a imprimir una vez que lo utilices dos puntos y abrimos un
corchete porque esto va a ser como si fuera un arreglo y después comillas dobles y aquí colocas lo que
es el cuerpo arroba media y como estamos utilizando un móvil fears width y en esta parte es donde entraría
el tamaño pero vamos a ponerle un Pleiss Wolder signo de dólar uno lo abrimos ya y cerramos aquí vamos
a poner diagonal invertida en diagonal invertida.
Esto le va a decir que tiene que ser un salto de línea y después vamos a ponerle signo de dólar cero
y después hago una divertida gine entonces este es nuestro snippets puede ser que lo vamos a utilizar
con MQ ya puedes guardar cambios y cerrar vamos a probarlo y si hay un error volvemos a poner aquí MQ
y le puedes dar tap y puedes ver que aparece esta forma aquí por ejemplo agrega esta Koma.
Este espacio de aquí vamos a eliminarlo de nueva cuenta Comaneci control SIPE y snippets elegimos se
para de nueva cuenta editar ese archivo y puede ser que aquí tenga un espacio este no debería abrir.
Si tuviste un error en tu Snipes y no se vio bien copia como está aquí si hay un error unespacio o algo
probablemente te esté causando ese problema.
Eliminar esta parte cuenta MQ y puedes ver que aparece autocompletado lo que viene siendo Armida.
De esa forma vamos a ahorrar mucho tiempo vamos a volver al diseño y puedes ver que nos hace falta la
navegación debe estar un elemento frente al otro por lo tanto usar un poco de scroll y en esta parte
de aquí vamos a utilizar nuestro nombre snippets MQ y digamos de nueva cuenta en el dispositivo móvil
de una tablet.
Navegación.
Aquí vamos a cambiar de display Blok display inline y display va a colocar uno frente al otro de esta
forma.
Ahora si quieres que tenga un poco de separación Aquí le puedes poner un margen.
Right márgen right.
Digamos dos RAM que sería 20 pixeles de nueva cuenta este margen Bright te va a agregar una pequeña
franja en el último puedes eliminar Xela por ejemplo y copiar esta parte y ponerle Last of time.
2.2 las Thorstein sin espacios Marien cero guardamos cambios puedes ver que se ve de esta forma.
Ahora por ejemplo puede ser que esta navegación quedó alineada hacia arriba si la quieres alineada al
centro puedes volver a la barra y ponerle items online Haytham Center los va a centrar.
Puedes ver que en un dispositivo más grande está uno de un lado y otro de otro en uno más pequeño que
de esta forma vamos a ir cambiando el diseño únicamente en donde sea necesario.
Gracias al enfoque de móvil first que en mi opinión es el más fácil de entender y el que yo recomiendo.
Siguiente paso puede ser que la separación aquí es mucho más grande entonces puede ser que quieres pusimos
un margen de 5 Reem de nueva cuenta MQ y aquí vamos a poner de nueva cuenta 7 6 8 pixeles y ponemos
texto general abrimos llaves margin todo va a ser de 150 píxeles por lo tanto en 15 Reem y guardamos
cambio si el que tenemos más separación entonces si algo más pequeño puedes ver que vamos a tener más
de 5 Reem ahí en esta parte de aquí aquí y si lo hacemos es más pequeño de aquí hasta acá van a ser
15 Rubem y la verdad es que se ve bastante bien lo que viene siendo el encabezado bastante bastante
bien.
Vamos a continuar el siguiente video con la parte del blog así que continuamos en el siguiente video.