Vamos a continuar con el proyecto y ahora sí vamos a saber un poco sobre los acuerdos.
Voy a agregar aquí para que sea un poco más notorio en el video un selector para el bodhi usualmente
bueno el uadi debe estar aquí arriba conforme se va presentando lo voy a colocar aquí más que nada para
el video y voy a agregarle un color de fondo Bagram color.
En el video anterior vimos que agregamos los colores con valores hexadecimales pero también puedes agregar
un color por un nombre voy a utilizar uno que se llama Con flOwer Blue que se ve un poco raro un nombre
pero una vez que lo guardas eso este color como morado o algo así y lo que va a ser un media Kairi es
que a partir de cierto punto puedes cambiar la apariencia de un elemento la sintaxis como vimos anteriormente
de la siguiente forma arroba media y luego agregamos paréntesis si lo pones el paréntesis pegado al
medio no va a funcionar entonces tienes que tener un espacio después agrega es una regla que va a decir
en qué parte.
A partir de qué resolución va a cambiar lo que viene siendo el diseño del elemento o la apariencia del
elemento.
Voy a poner la siguiente sintaxis Minuit y voy a colocar 500 píxeles espacio y abrimos llaves todo lo
que coloques dentro de estas dos llaves lo que se va a ver afectado por esta regla que está aquí ahora
tal vez Yasmany que se esté Minuit ese Minuit lo que va a hacer es tomar o aplicar lo que viene siendo
las reglas que hemos definido de CSS cuando el ancho de la pantalla sea mínimo de 500 píxeles lo puedes
cambiar obviamente puedes ponerle mil píxeles o 800 o 300 pero aquí solamente lo pones en 500.
Después escribes el selector del elemento que quieres reescribir en este caso vamos a hacerlo con el
body por lo tanto va a colocar aquí Bodhi y abro llaves nuevamente.
Entonces puede ser que tenemos estas llaves todo lo que está de nueva cuenta dentro de las llaves pues
va a ser el código que va a cambiar la apariencia de este elemento en esta resolución y voy a colocar
un Bagram color voy a reescribir el color que tenía anteriormente.
De nueva cuenta va utilizar un color que se llama LOIC coral para que sea un poco diferente.
Entonces guardamos cambios y puedes ver que aparece este color como Rosa por qué pasa eso de nueva cuenta.
Bueno porque tenemos esta regla que dice Si el ancho de la pantalla es mínimo 500 píxeles entonces aplica
este color rosa.
Cómo vas a saber qué tamaño es el que estamos.
Bueno puedes abrir Crom por ejemplo botón derecho inspeccionar y cuando tienes abierto developer tools
con la barra hacia un lado y comienza a hacer risas.
Aquí aparece una regla que arriba eso te va a decir el tamaño de la ventana actual.
El primer número es el que te dice el ancho de la pantalla actual es que si lo hago más pequeño dice
que aquí son ochocientos cuarenta píxeles por ejemplo.
Entonces mínimo tienes que ser 500 para que apliqué esto.
Por lo tanto si 800 pues está sobre los 500 por lo tanto aplica estas reglas.
Pero si lo hago más pequeño y me voy más debajo de 500 puedes ver que aparece el otro color que vendría
siendo este de aquí ahora tal vez digas bueno pero por qué se aplica este si no lo definimos.
Ninguna regla para que se muestre.
Bueno básicamente si no tienes ningún día QWERTY se va a aplicar en todos los tamaños.
Entonces en este caso como no tenemos ningún medio QWERTY se aplican todos los tamaños y puedes ver
que por ejemplo en 400 o 300 píxeles se aplica el mismo color morado.
Pero una vez que pasamos los 500 entra lo que viene siendo esta medida QWERTY y cambia el color de fondo.
De nueva cuenta tal vez pueda ser que tengas otra duda.
Puedo agregar múltiples de acuerdo a respuesta así lo harías de la siguiente forma.
Width por ejemplo y ponerle aquí 800 píxeles de nueva cuenta voy a seleccionar el body y voy a cambiar
el background color de nueva cuenta para que sea notorio por un color que se llama Wit.
De esta forma guardamos cambios y puedes ver que aparece este color porque aquí tengo 800 píxeles por
lo tanto solo algo más pequeño una vez que me voy debajo de esos 800 cambia este color porque ya estamos
en los 500 y una vez que me voy debajo de los 500 cambia lo que viene siendo este con Flower Blue.
Aquí no se alcanza a ver bien.
Por lo tanto tengo que abrir la barra lateral cuando voy debajo de los 500 puede ser que cambiaste color
puedes ver como tenemos tres cambios de colores gracias a los diferentes Aquaris que hemos agregado.
Tal vez tengas la duda bueno segregó aquí 500 cuál va a ganar.
Bueno por la forma en que trabaja.
Ese es el último que has declarado.
Es el que va a funcionar.
Ver que aparece este color y este color como Rosa ya no se vería
ahora.
Otro ejemplo de Olmi de acuerdo.
Vamos a seleccionar este texto que está aquí dice entrada de blog vamos a escribir un H1 recuerda si
no está dentro de los media Cuadri va a aplicarse en todos los tamaños que voy a hacer aquí es colocar
bonsáis que diga tres Fram y también voy a hacer mayúsculas el texto con Tex Transform.
Y bueno la regla es el valor más bien vendría siendo aparcas.
Entonces puede ser que en todos los tamaños se aplican estas dos porque no hay ningún Miyako que puede
ser más pequeño al tamaño que tú deseas y no va a haber ningún cambio porque no hay ningún bellaquería
se aplican estos en todos los tamaños.
Tal vez tengas la siguiente duda segregamos a quien vea Cuadri media Minuit.
Digamos que a los 600 píxeles quiero cambiar la apariencia de este H1.
Tal vez tengas la duda de si hay aquí 2 tengo que reescribir ambos la respuesta es no. Si lo pones aquí
Fonz 6 4 Rubem es decir hacerlo un poco más grande.
Este text Transform como no hay nada que lo reescribe es como si estuviera aquí pero no necesitas pasarlo
se pasa automáticamente se hereda.
Si se conoce se hereda se pasa porque no hay ninguna regla que lo cambie.
Se pasa automáticamente por lo tanto si lo hago un poco más grande pues el que se queda en mayúsculas.
Pero si voy haciendo ese rishis nota como ver un lugar en el que va a cambiar el tamaño de 4 ram a 3
from entonces si no necesita reescribir todas las propiedades solamente lo que deseas cambiar.
Ahora puedes ver que estoy utilizando una sintaxis que dice Minuit.
Eso va a depender del enfoque que desees utilizar.
Existen muchos en realidad pero hay dos que sobresalen.
Lo que se conoce como stock Fears es decir primero el escritorio y el otro se conoce como móvil Fears
es decir primero el teléfono móvil en el siguiente vídeo vamos a ver lo que es de stock first y cómo
sería su sintaxis porque es un poco diferente a esta gama basado en el siguiente video.