Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

CSS - Dimensiones - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 22 de febrero de 2021 por Fernando M.

123 visualizaciones

Más información Transcripción

Descargar la transcripción

Vale, bien, ahora vamos a ver cómo gestionar las dimensiones de cualquier elemento dentro de nuestra página web, ¿vale? 00:00:02
Y ya esto también nos va a servir para ir poniendo más etiquetas o más propiedades que vamos a dejar siempre fijas en nuestras páginas, ¿vale? 00:00:10
Entonces nos vamos a ir a brackets, ¿vale? 00:00:20
Fijaros que este es el archivo con el que estábamos en el ejercicio anterior, viendo los fondos. 00:00:24
Entonces, para ir reutilizando código, que no sea todo mal rápido, fijaros lo que voy a hacer. 00:00:28
Le voy a dar a archivo y aquí le voy a dar a guardar como, ¿vale? 00:00:34
Y simplemente lo que hago es que le cambio el nombre y donde ponía fondos, ahora lo llamo dimensiones, ¿vale? 00:00:39
Dimensiones.html. 00:00:46
Y ahora lo que voy a hacer es borrarme, pues me voy a borrar todas estas propiedades, ¿vale? 00:00:48
Y me voy a borrar todo el contenido que había creado anteriormente, ¿vale? 00:00:54
Y ahora lo vamos a llamar a esto, dimensiones en CSS, ¿vale? 00:01:02
Ok, pues vale. 00:01:13
Vamos a hacer una cosa. 00:01:15
Lo primero que nos vamos a hacer es crearnos aquí una cabecera. 00:01:16
Recuerdo que esto era importante en HTML5. 00:01:20
Y dentro de esta cabecera nos vamos a crear un párrafo. 00:01:23
que lo vamos a llamar, esto es una cabecera, ¿vale? Y lo que vamos a hacer, fijaros que 00:01:25
yo ya dejo aquí mis características del body ya siempre fijas, ¿vale? Entonces lo 00:01:37
que nos vamos a venir aquí es, lo primero es establecer unas propiedades que ya hemos 00:01:41
visto, que son los márgenes y el espaciado, ¿vale? O el relleno, que la vamos a poner 00:01:48
ahora mismo por defecto, simplemente esto es para hacer pruebas aquí, ¿vale? Vamos 00:01:52
a poner margin 0, ¿vale? Fijaros como al poner 0 se ha subido para arriba porque ya 00:01:55
no hay márgenes, ¿vale? Y vamos a poner también un relleno de 0, ¿vale? Y ahora 00:02:00
vamos a modificar esa cabecera, ese elemento cabecera. En primer lugar le vamos a poner 00:02:07
un color de fondo, ¿vale? background color, ¿vale? Y le vamos a poner todo el rojo, todo 00:02:12
el verde y el azul acero, ¿vale? De tal forma que sea amarillo, ¿vale? Y vamos a empezar 00:02:21
a ver esas propiedades que hablábamos de las dimensiones. Fijaros que al poner yo una 00:02:29
cabecera y dentro un párrafo, mi cabecera me está ocupando todo el ancho de la página, 00:02:34
¿vale? Yo eso lo puedo gestionar para que no me ocupe todo el ancho. ¿Cómo lo hago? 00:02:40
Pues con una propiedad que se llama width, anchura, ¿vale? 00:02:44
Si yo aquí pongo, por ejemplo, 90%, fijaros que ya mi web, perdón, que ya mi cabecera ya no me ocupa todo el ancho de la página, 00:02:49
solo me ocupa el 90% de ella, ¿vale? 00:02:58
Si yo pongo un 50%, pues lo mismo, ¿vale? 00:03:00
Esto es para que veáis propiedades. 00:03:06
De la misma forma que lo hacemos con la anchura, lo podemos hacer con la altura, ¿vale? 00:03:08
¿Vale? Fijaros aquí, yo pongo 20%, ¿vale? 20%. Puedo poner más, puedo poner, por ejemplo, un 50%, ¿vale? Pero fijaros que cuando yo cambio, no me cambia este valor, ¿vale? 00:03:15
¿Vale? ¿Esto por qué ocurre? Pues esto ocurre porque para este, para ahora mismo, para la web, ¿vale? Para HTML o para hojas de estilo, la página solo ocupa la parte donde tiene contenido. 00:03:31
Es decir, solo ocupa esa sección que veis que se llama esto es una cabecera, ¿vale? Entonces nosotros le tenemos que decir que lo que ocupa es el 100%, es todo lo que se ve de la ventana, ¿vale? 00:03:45
Para eso nos vamos a ir a la parte de estilo y esta es una propiedad que vamos a dejar ya siempre, ¿vale? Y aquí vamos a poner y le vamos a decir que todo el HTML, es decir, que toda la página y que todo el body, ¿vale? Todo esto tenga una altura del 100%, ¿vale? 00:03:56
Entonces, fijaros cómo cambia la cosa, porque ahora toda la página, toda la página ocupa el 100%, ¿vale? Si yo le digo que mi cabecera ocupa el 80%, pues fijaros lo que ocupa, ¿vale? Yo puedo también sugestionarle y decirle que ocupe solo el 20%, ¿vale? Y me ocupa esa parte, ¿vale? Esto es importante por si queremos hacer un menú, por ejemplo, o una barra de navegación, lo que queramos, ¿vale? 00:04:16
¿Qué más? ¿Qué más? ¿Qué más? Vale, tenemos otras propiedades que son importantes a la hora de utilizar otros dispositivos, ¿vale? Imaginaros que estamos utilizando dispositivos móviles o dispositivos en televisiones con pantalla más grande, ¿vale? Y es que esas propiedades son el max width, ¿vale? Que en este caso pondríamos una anchura máxima, pues vale, pues imaginaros que yo quiero poner 400 píxeles, ¿vale? 00:04:42
¿Vale? Fijaros que al poner yo el 90%, ese 90% en mi página, en las dimensiones que estáis viendo vosotros en pantalla, 00:05:09
implicaba más de 400. Por lo tanto, esta propiedad que acabo de poner me limita a eso, ¿vale? 00:05:18
En este caso yo voy a poner, por ejemplo, pues 1000 píxeles. ¿Vale? Y fijaros que con 1000 píxeles me sobra, ¿vale? 00:05:23
Si yo pongo 1200 sigo teniendo lo mismo, ¿vale? 00:05:31
Importante. 00:05:37
Otra propiedad, la altura mínima, ¿vale? 00:05:39
La altura mínima de esta cabecera. 00:05:43
Vamos a imaginarnos que yo quiero como una altura mínima 10 píxeles, ¿vale? 00:05:45
Como ese 20%, que yo ahora mismo tengo definido, es por encima de 1000 píxeles, pues me cumple bien, ¿vale? 00:05:50
Y puedo poner de la misma forma un max, una altura máxima, ¿vale? 00:05:57
Pues pongo, por ejemplo, 15 píxeles. Y fijaros ahora que al poner 15 píxeles, él dice, 15 píxeles es menos de lo que yo tenía antes. Fijaros cómo ahora se ha reducido, ¿vale? Pues entonces vamos a poner 100 píxeles, ¿vale? 00:06:02
Y ahora sí, que veis que con 100 píxeles eso es, uy, perdón, 100 píxeles es menor, ¿vale? Es menor que el 20%, ¿vale? Fijaros que si yo pongo 1000 o 10.000, ese 10.000 es mayor o ese 1000 es mayor que el 20%, pero si pongo 100 no, ¿vale? 00:06:15
Entonces yo voy a dejar ahora mismo ese 100, ¿vale? Y de la misma forma también puedo poner un min width, ¿vale? Pues voy a jugar también con eso, ¿vale? Entonces, importante de esta parte, siempre ponemos, definimos una altura del 100%, ¿vale? Para hacerla entender a nuestro dispositivo, a nuestro navegador, que la página ocupa el 100% de lo que estamos viendo y luego podemos ir jugando con los diferentes elementos con las dimensiones, ¿vale? 00:06:37
bueno, pues eso en cuanto a dimensiones 00:07:01
vamos a ir viendo vídeos para que 00:07:06
en el que vamos a ir haciendo hincapié sobre esto 00:07:07
entonces es importante que nos quede claro 00:07:09
Autor/es:
Fernando Martínez Martí
Subido por:
Fernando M.
Licencia:
Reconocimiento - No comercial - Compartir igual
Visualizaciones:
123
Fecha:
22 de febrero de 2021 - 21:26
Visibilidad:
Público
Centro:
IES EL BURGO - IGNACIO ECHEVERRÍA
Duración:
07′ 13″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
21.27 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid