`@media` y diseño responsivo
Este artículo explica @media y el diseño responsivo.
Aprenderás a crear diseños flexibles mediante la sintaxis básica y ejemplos de uso de @media.
YouTube Video
HTML para vista previa
css-responsive-media.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-responsive-media.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties For Responsive Design</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>@media</h2>
20 </header>
21 <article>
22 <h3>@media Syntax</h3>
23 <section>
24 <header><h4>CSS</h4></header>
25<pre class="sample">
26@media media-type and (condition) {
27 /* Styles applied when the media query is matched */
28}
29</pre>
30 </section>
31 </article>
32 <article>
33 <h3>@media Example : max-width</h3>
34 <section>
35 <header><h4>CSS</h4></header>
36<pre class="sample">
37@media screen and (max-width: 600px) {
38 body {
39 background-color: lightblue;
40 }
41 p {
42 font-size: 14px;
43 }
44}
45</pre>
46 </section>
47 </article>
48 <article>
49 <h3>@media Example : orientation</h3>
50 <section>
51 <header><h4>CSS</h4></header>
52<pre class="sample">
53@media screen and (orientation: landscape) {
54 body {
55 background-color: lightgreen;
56 }
57}
58</pre>
59 </section>
60 </article>
61 <article>
62 <h3>@media Example : min-width & max-width</h3>
63 <section>
64 <header><h4>CSS</h4></header>
65<pre class="sample">
66@media screen and (min-width: 768px) and (max-width: 1024px) {
67 body {
68 background-color: lightgray;
69 }
70}
71</pre>
72 </section>
73 </article>
74 <article>
75 <h3>@media Example : devices</h3>
76 <section>
77 <header><h4>CSS</h4></header>
78<pre class="sample">
79/* Mobile styles */
80@media screen and (max-width: 600px) {
81 body {
82 font-size: 14px;
83 }
84}
85
86/* Tablet styles */
87@media screen and (min-width: 601px) and (max-width: 1024px) {
88 body {
89 font-size: 16px;
90 }
91}
92
93/* Desktop styles */
94@media screen and (min-width: 1025px) {
95 body {
96 font-size: 18px;
97 }
98}
99</pre>
100 </section>
101 </article>
102 </main>
103</body>
104</html>Reglas de @media
@media es una regla para usar consultas de medios CSS y aplicar estilos basados en condiciones específicas. Esto permite aplicar diferentes CSS según el tamaño de la pantalla del dispositivo, la orientación, la resolución u otras características. Principalmente usado para diseño responsivo, ayuda a ajustar la apariencia en diferentes dispositivos como ordenadores, tabletas y móviles.
Sintaxis Básica
1@media media-type and (condition) {
2 /* Styles applied when the media query is matched */
3}- En
media-type, especifica el tipo de medio (por ejemplo,screen,print). - En
condition, especifica condiciones como el tamaño de la pantalla o la resolución.
Tipos de medios
- screen: Estilos para la visualización en pantalla, como en ordenadores y teléfonos inteligentes.
- imprimir: Este es el estilo aplicado para la impresión.
- todo: Este es el estilo aplicado a todos los medios.
Condiciones Comúnmente Utilizadas
- min-width / max-width: Aplica estilos de acuerdo con el ancho mínimo/máximo de la pantalla.
- min-height / max-height: Aplica estilos de acuerdo con la altura mínima/máxima de la pantalla.
- orientation: Especifica la orientación de la pantalla (
portraitpara vertical,landscapepara horizontal). - resolution: Aplica estilos de acuerdo con la resolución de la pantalla (por ejemplo, DPI).
Uso de Ejemplo
Cambios de estilo basados en el ancho de la pantalla
Por ejemplo, para especificar estilos aplicados cuando el ancho de la pantalla sea menor a 600 píxeles, puedes escribirlo así:.
1@media screen and (max-width: 600px) {
2 body {
3 background-color: lightblue;
4 }
5 p {
6 font-size: 14px;
7 }
8}- En dispositivos con un ancho de pantalla de 600px o menos, el color de fondo cambia a azul claro y el tamaño de fuente de los párrafos se establece en 14px.
Estilos basados en la orientación de la pantalla
Para aplicar estilos cuando el dispositivo esté en orientación horizontal, puedes escribirlo así:.
1@media screen and (orientation: landscape) {
2 body {
3 background-color: lightgreen;
4 }
5}- Cuando la pantalla está en modo horizontal, el color de fondo se vuelve verde claro.
3. Ejemplo de combinación de múltiples condiciones
Puedes combinar múltiples condiciones con and para aplicar estilos a condiciones más específicas.
1@media screen and (min-width: 768px) and (max-width: 1024px) {
2 body {
3 background-color: lightgray;
4 }
5}- Si el ancho de la pantalla está entre 768px y 1024px, el color de fondo cambia a gris claro.
Ejemplo de Aplicación: Diseño Responsivo
1/* Mobile styles */
2@media screen and (max-width: 600px) {
3 body {
4 font-size: 14px;
5 }
6}
7
8/* Tablet styles */
9@media screen and (min-width: 601px) and (max-width: 1024px) {
10 body {
11 font-size: 16px;
12 }
13}
14
15/* Desktop styles */
16@media screen and (min-width: 1025px) {
17 body {
18 font-size: 18px;
19 }
20}En el diseño responsivo, es común aplicar diferentes diseños dependiendo del ancho de la pantalla.
- Los tamaños de fuente cambian en móviles (600px o menos), tabletas (601px a 1024px) y computadoras de escritorio (1025px o más).
Resumen
@media es una herramienta poderosa para cambiar los estilos CSS según los dispositivos y tamaños de pantalla, y es esencial para el diseño responsivo. Usando hábilmente condiciones como min-width y max-width, puedes crear un sitio web optimizado para varios dispositivos.
Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.