Activa JavaScript para disfrutar de los vídeos de la Mediateca.
CSS Dispositivos y medias - Contenido educativo
Ajuste de pantallaEl ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:
Un elemento de gran interés es conocer las características del dispositivo que estamos utilizando
00:00:00
y adaptar nuestra hoja de estilo a ese dispositivo.
00:00:06
Entonces estamos hablando del diseño adaptativo o Responsive Design.
00:00:10
Entonces, bueno, vamos a ver un poco alguna característica propia.
00:00:13
Por ejemplo, tenemos una etiqueta que es la etiqueta Meta Viewport.
00:00:17
Esta etiqueta habitualmente se está poniendo este valor.
00:00:22
¿Y esto qué significa?
00:00:26
Pues vamos a entrar primero en materia.
00:00:27
habitualmente los monitores de escritorio suelen tener 96 dpi
00:00:29
96 dpi son puntos por pulgada
00:00:34
96 puntos por pulgada
00:00:36
pero claro, en un móvil la densidad de los puntos es mayor
00:00:38
estamos hablando de 300 dpi o más
00:00:41
entonces si quisiéramos leer un texto
00:00:45
veríamos bastante mal
00:00:47
no es una cuestión solamente del ancho de la pantalla
00:00:49
sino también de la densidad de píxeles
00:00:51
no veríamos bien la información
00:00:53
con lo cual esta etiqueta nos permite decir
00:00:54
que nos adaptemos a ese ancho
00:00:57
y apliquemos esa escala
00:00:59
esto irá evolucionando seguramente con el tiempo
00:01:01
y vamos a ver más etiquetas específicas que tenemos
00:01:04
por ejemplo, cuando estamos enlazando hardstyle
00:01:08
podemos establecer qué media estamos trabajando
00:01:10
si en una pantalla o en una impresora
00:01:13
y adaptar en función de eso
00:01:15
uno u otro CSS
00:01:18
hay un montón de valores
00:01:20
para estos dispositivos
00:01:22
aquí vemos algunos de voz
00:01:26
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.
00:01:28
¿De acuerdo? Con lo cual nosotros podemos establecer elementos que son típicos para un entorno o para otro, o unidades o tamaños.
00:01:41
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.
00:01:50
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?
00:02:09
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.
00:02:37
Incluso podríamos definir más, aquellas que estén entre 400 y 500, aquellas, es decir, podemos establecer una serie de tamaños.
00:02:49
O la orientación, si la orientación es de un tipo, pues aplicamos un color, si no, aplicamos otro.
00:02:58
Es decir, podemos adaptar bastante bien nuestra página a diversos elementos
00:03:04
- Idioma/s:
- Autor/es:
- Amadeo Mora
- Subido por:
- Amadeo M.
- Licencia:
- Dominio público
- Visualizaciones:
- 107
- Fecha:
- 28 de diciembre de 2020 - 20:28
- Visibilidad:
- Público
- Centro:
- IES CLARA DEL REY
- Duración:
- 03′ 13″
- Relación de aspecto:
- 1.78:1
- Resolución:
- 1364x768 píxeles
- Tamaño:
- 27.69 MBytes
