1
00:00:00,620 --> 00:00:06,099
Un elemento de gran interés es conocer las características del dispositivo que estamos utilizando

2
00:00:06,099 --> 00:00:09,439
y adaptar nuestra hoja de estilo a ese dispositivo.

3
00:00:10,019 --> 00:00:13,279
Entonces estamos hablando del diseño adaptativo o Responsive Design.

4
00:00:13,939 --> 00:00:17,039
Entonces, bueno, vamos a ver un poco alguna característica propia.

5
00:00:17,379 --> 00:00:21,260
Por ejemplo, tenemos una etiqueta que es la etiqueta Meta Viewport.

6
00:00:22,019 --> 00:00:25,879
Esta etiqueta habitualmente se está poniendo este valor.

7
00:00:26,079 --> 00:00:27,120
¿Y esto qué significa?

8
00:00:27,120 --> 00:00:29,679
Pues vamos a entrar primero en materia.

9
00:00:29,679 --> 00:00:34,039
habitualmente los monitores de escritorio suelen tener 96 dpi

10
00:00:34,039 --> 00:00:36,560
96 dpi son puntos por pulgada

11
00:00:36,560 --> 00:00:38,299
96 puntos por pulgada

12
00:00:38,299 --> 00:00:41,780
pero claro, en un móvil la densidad de los puntos es mayor

13
00:00:41,780 --> 00:00:45,119
estamos hablando de 300 dpi o más

14
00:00:45,119 --> 00:00:47,840
entonces si quisiéramos leer un texto

15
00:00:47,840 --> 00:00:49,840
veríamos bastante mal

16
00:00:49,840 --> 00:00:51,759
no es una cuestión solamente del ancho de la pantalla

17
00:00:51,759 --> 00:00:53,240
sino también de la densidad de píxeles

18
00:00:53,240 --> 00:00:54,700
no veríamos bien la información

19
00:00:54,700 --> 00:00:57,759
con lo cual esta etiqueta nos permite decir

20
00:00:57,759 --> 00:00:59,259
que nos adaptemos a ese ancho

21
00:00:59,259 --> 00:01:01,500
y apliquemos esa escala

22
00:01:01,500 --> 00:01:04,939
esto irá evolucionando seguramente con el tiempo

23
00:01:04,939 --> 00:01:08,200
y vamos a ver más etiquetas específicas que tenemos

24
00:01:08,200 --> 00:01:10,280
por ejemplo, cuando estamos enlazando hardstyle

25
00:01:10,280 --> 00:01:13,680
podemos establecer qué media estamos trabajando

26
00:01:13,680 --> 00:01:15,760
si en una pantalla o en una impresora

27
00:01:15,760 --> 00:01:18,019
y adaptar en función de eso

28
00:01:18,019 --> 00:01:20,700
uno u otro CSS

29
00:01:20,700 --> 00:01:22,879
hay un montón de valores

30
00:01:22,879 --> 00:01:26,180
para estos dispositivos

31
00:01:26,180 --> 00:01:28,040
aquí vemos algunos de voz

32
00:01:28,040 --> 00:01:41,040
Por ejemplo, que son muy interesantes y que deberíamos tener siempre también cuidado, recordar que nuestras páginas son visitadas por todo tipo de personas, incluso y cada vez más por cualquier uso de máquina.

33
00:01:41,700 --> 00:01:50,200
¿De acuerdo? Con lo cual nosotros podemos establecer elementos que son típicos para un entorno o para otro, o unidades o tamaños.

34
00:01:50,200 --> 00:02:09,620
Bueno, como las características del dispersivo lo que más nos interesa es, aparte de eso de la densidad, el ancho, la altura, la orientación, esto sobre todo tanto en pantalla como en impresión, la proporción entre altura y altura y la resolución.

35
00:02:09,620 --> 00:02:37,800
Bien, tenemos una etiqueta, una regla arroba, que es arroba media, que podemos poner ciertas características, por ejemplo, aquí estamos poniendo que para una pantalla que tenga un máximo de ancho de 500 píxeles, vamos a poner este color, y para las pantallas que tengan mayor de 500, vamos a cambiar el color, ¿de acuerdo?

36
00:02:37,800 --> 00:02:48,379
Entonces esto lo podríamos, vamos a ver si lo podemos ver, efectivamente vemos este color o este color en función de cómo ha ido cambiando la pantalla.

37
00:02:49,500 --> 00:02:57,560
Incluso podríamos definir más, aquellas que estén entre 400 y 500, aquellas, es decir, podemos establecer una serie de tamaños.

38
00:02:58,240 --> 00:03:04,020
O la orientación, si la orientación es de un tipo, pues aplicamos un color, si no, aplicamos otro.

39
00:03:04,020 --> 00:03:10,560
Es decir, podemos adaptar bastante bien nuestra página a diversos elementos