1
00:00:00,330 --> 00:00:04,580
Vamos a continuar con el proyecto y ahora sí vamos a saber un poco sobre los acuerdos.

2
00:00:04,690 --> 00:00:09,930
Voy a agregar aquí para que sea un poco más notorio en el video un selector para el bodhi usualmente

3
00:00:09,930 --> 00:00:13,890
bueno el uadi debe estar aquí arriba conforme se va presentando lo voy a colocar aquí más que nada para

4
00:00:13,890 --> 00:00:17,920
el video y voy a agregarle un color de fondo Bagram color.

5
00:00:18,180 --> 00:00:24,090
En el video anterior vimos que agregamos los colores con valores hexadecimales pero también puedes agregar

6
00:00:24,660 --> 00:00:30,690
un color por un nombre voy a utilizar uno que se llama Con flOwer Blue que se ve un poco raro un nombre

7
00:00:30,690 --> 00:00:38,240
pero una vez que lo guardas eso este color como morado o algo así y lo que va a ser un media Kairi es

8
00:00:38,240 --> 00:00:45,770
que a partir de cierto punto puedes cambiar la apariencia de un elemento la sintaxis como vimos anteriormente

9
00:00:45,830 --> 00:00:51,770
de la siguiente forma arroba media y luego agregamos paréntesis si lo pones el paréntesis pegado al

10
00:00:51,770 --> 00:00:58,700
medio no va a funcionar entonces tienes que tener un espacio después agrega es una regla que va a decir

11
00:00:58,730 --> 00:00:59,800
en qué parte.

12
00:00:59,900 --> 00:01:06,290
A partir de qué resolución va a cambiar lo que viene siendo el diseño del elemento o la apariencia del

13
00:01:06,290 --> 00:01:07,540
elemento.

14
00:01:07,700 --> 00:01:15,530
Voy a poner la siguiente sintaxis Minuit y voy a colocar 500 píxeles espacio y abrimos llaves todo lo

15
00:01:15,530 --> 00:01:20,980
que coloques dentro de estas dos llaves lo que se va a ver afectado por esta regla que está aquí ahora

16
00:01:20,990 --> 00:01:29,600
tal vez Yasmany que se esté Minuit ese Minuit lo que va a hacer es tomar o aplicar lo que viene siendo

17
00:01:29,840 --> 00:01:36,920
las reglas que hemos definido de CSS cuando el ancho de la pantalla sea mínimo de 500 píxeles lo puedes

18
00:01:36,920 --> 00:01:44,060
cambiar obviamente puedes ponerle mil píxeles o 800 o 300 pero aquí solamente lo pones en 500.

19
00:01:44,060 --> 00:01:51,050
Después escribes el selector del elemento que quieres reescribir en este caso vamos a hacerlo con el

20
00:01:51,050 --> 00:01:54,770
body por lo tanto va a colocar aquí Bodhi y abro llaves nuevamente.

21
00:01:54,780 --> 00:01:59,560
Entonces puede ser que tenemos estas llaves todo lo que está de nueva cuenta dentro de las llaves pues

22
00:01:59,570 --> 00:02:05,300
va a ser el código que va a cambiar la apariencia de este elemento en esta resolución y voy a colocar

23
00:02:05,300 --> 00:02:09,990
un Bagram color voy a reescribir el color que tenía anteriormente.

24
00:02:10,100 --> 00:02:14,690
De nueva cuenta va utilizar un color que se llama LOIC coral para que sea un poco diferente.

25
00:02:14,690 --> 00:02:20,540
Entonces guardamos cambios y puedes ver que aparece este color como Rosa por qué pasa eso de nueva cuenta.

26
00:02:20,540 --> 00:02:26,980
Bueno porque tenemos esta regla que dice Si el ancho de la pantalla es mínimo 500 píxeles entonces aplica

27
00:02:26,990 --> 00:02:27,980
este color rosa.

28
00:02:27,980 --> 00:02:30,720
Cómo vas a saber qué tamaño es el que estamos.

29
00:02:30,720 --> 00:02:36,560
Bueno puedes abrir Crom por ejemplo botón derecho inspeccionar y cuando tienes abierto developer tools

30
00:02:36,890 --> 00:02:39,980
con la barra hacia un lado y comienza a hacer risas.

31
00:02:39,980 --> 00:02:44,930
Aquí aparece una regla que arriba eso te va a decir el tamaño de la ventana actual.

32
00:02:45,260 --> 00:02:50,720
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

33
00:02:50,720 --> 00:02:54,180
que aquí son ochocientos cuarenta píxeles por ejemplo.

34
00:02:54,380 --> 00:02:58,160
Entonces mínimo tienes que ser 500 para que apliqué esto.

35
00:02:58,160 --> 00:03:03,190
Por lo tanto si 800 pues está sobre los 500 por lo tanto aplica estas reglas.

36
00:03:03,620 --> 00:03:09,560
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

37
00:03:09,560 --> 00:03:14,210
siendo este de aquí ahora tal vez digas bueno pero por qué se aplica este si no lo definimos.

38
00:03:14,210 --> 00:03:16,550
Ninguna regla para que se muestre.

39
00:03:16,550 --> 00:03:22,840
Bueno básicamente si no tienes ningún día QWERTY se va a aplicar en todos los tamaños.

40
00:03:22,880 --> 00:03:27,800
Entonces en este caso como no tenemos ningún medio QWERTY se aplican todos los tamaños y puedes ver

41
00:03:27,800 --> 00:03:32,020
que por ejemplo en 400 o 300 píxeles se aplica el mismo color morado.

42
00:03:32,240 --> 00:03:38,450
Pero una vez que pasamos los 500 entra lo que viene siendo esta medida QWERTY y cambia el color de fondo.

43
00:03:38,450 --> 00:03:40,570
De nueva cuenta tal vez pueda ser que tengas otra duda.

44
00:03:40,670 --> 00:03:45,490
Puedo agregar múltiples de acuerdo a respuesta así lo harías de la siguiente forma.

45
00:03:45,800 --> 00:03:53,590
Width por ejemplo y ponerle aquí 800 píxeles de nueva cuenta voy a seleccionar el body y voy a cambiar

46
00:03:53,590 --> 00:03:58,870
el background color de nueva cuenta para que sea notorio por un color que se llama Wit.

47
00:03:58,870 --> 00:04:06,440
De esta forma guardamos cambios y puedes ver que aparece este color porque aquí tengo 800 píxeles por

48
00:04:06,440 --> 00:04:13,780
lo tanto solo algo más pequeño una vez que me voy debajo de esos 800 cambia este color porque ya estamos

49
00:04:13,780 --> 00:04:19,670
en los 500 y una vez que me voy debajo de los 500 cambia lo que viene siendo este con Flower Blue.

50
00:04:19,690 --> 00:04:21,270
Aquí no se alcanza a ver bien.

51
00:04:21,400 --> 00:04:28,270
Por lo tanto tengo que abrir la barra lateral cuando voy debajo de los 500 puede ser que cambiaste color

52
00:04:29,880 --> 00:04:35,380
puedes ver como tenemos tres cambios de colores gracias a los diferentes Aquaris que hemos agregado.

53
00:04:35,380 --> 00:04:38,410
Tal vez tengas la duda bueno segregó aquí 500 cuál va a ganar.

54
00:04:38,420 --> 00:04:39,790
Bueno por la forma en que trabaja.

55
00:04:39,850 --> 00:04:42,060
Ese es el último que has declarado.

56
00:04:42,060 --> 00:04:43,820
Es el que va a funcionar.

57
00:04:43,920 --> 00:04:48,820
Ver que aparece este color y este color como Rosa ya no se vería

58
00:04:51,770 --> 00:04:52,150
ahora.

59
00:04:52,150 --> 00:04:53,690
Otro ejemplo de Olmi de acuerdo.

60
00:04:53,710 --> 00:04:59,780
Vamos a seleccionar este texto que está aquí dice entrada de blog vamos a escribir un H1 recuerda si

61
00:04:59,770 --> 00:05:05,800
no está dentro de los media Cuadri va a aplicarse en todos los tamaños que voy a hacer aquí es colocar

62
00:05:05,890 --> 00:05:12,430
bonsáis que diga tres Fram y también voy a hacer mayúsculas el texto con Tex Transform.

63
00:05:12,710 --> 00:05:16,770
Y bueno la regla es el valor más bien vendría siendo aparcas.

64
00:05:17,180 --> 00:05:21,670
Entonces puede ser que en todos los tamaños se aplican estas dos porque no hay ningún Miyako que puede

65
00:05:21,730 --> 00:05:26,110
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

66
00:05:26,470 --> 00:05:28,700
se aplican estos en todos los tamaños.

67
00:05:28,810 --> 00:05:33,820
Tal vez tengas la siguiente duda segregamos a quien vea Cuadri media Minuit.

68
00:05:34,360 --> 00:05:38,980
Digamos que a los 600 píxeles quiero cambiar la apariencia de este H1.

69
00:05:39,910 --> 00:05:47,140
Tal vez tengas la duda de si hay aquí 2 tengo que reescribir ambos la respuesta es no. Si lo pones aquí

70
00:05:47,150 --> 00:05:50,750
Fonz 6 4 Rubem es decir hacerlo un poco más grande.

71
00:05:50,750 --> 00:05:58,160
Este text Transform como no hay nada que lo reescribe es como si estuviera aquí pero no necesitas pasarlo

72
00:05:58,190 --> 00:06:00,310
se pasa automáticamente se hereda.

73
00:06:00,310 --> 00:06:04,460
Si se conoce se hereda se pasa porque no hay ninguna regla que lo cambie.

74
00:06:04,670 --> 00:06:10,150
Se pasa automáticamente por lo tanto si lo hago un poco más grande pues el que se queda en mayúsculas.

75
00:06:10,510 --> 00:06:17,110
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

76
00:06:17,110 --> 00:06:24,350
from entonces si no necesita reescribir todas las propiedades solamente lo que deseas cambiar.

77
00:06:24,450 --> 00:06:27,630
Ahora puedes ver que estoy utilizando una sintaxis que dice Minuit.

78
00:06:27,690 --> 00:06:30,600
Eso va a depender del enfoque que desees utilizar.

79
00:06:30,600 --> 00:06:34,200
Existen muchos en realidad pero hay dos que sobresalen.

80
00:06:34,230 --> 00:06:40,380
Lo que se conoce como stock Fears es decir primero el escritorio y el otro se conoce como móvil Fears

81
00:06:40,380 --> 00:06:44,910
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

82
00:06:44,910 --> 00:06:48,990
sería su sintaxis porque es un poco diferente a esta gama basado en el siguiente video.