J. @media

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

1<!DOCTYPE html>
2<html lang="es">
3
4<head>
5
6 <meta charset="UTF-8">
7 <title>@media</title>
8 <meta name="viewport"
9 content="width=device-width">
10
11 <style>
12 body {
13 --gap: 0.5rem;
14 margin-top: 0;
15 }
16
17 menu,
18 header {
19 grid-area: head;
20 position: sticky;
21 top: 0;
22 display: flex;
23 gap: var(--gap);
24 align-items: baseline;
25 }
26
27 @media screen and (max-width: 599px) {
28
29 menu {
30 /* Quita las viñetas. */
31 list-style-type: none;
32 padding: 0;
33 margin: 0;
34 }
35
36 #hamburguesa {
37 anchor-name: --hamburguesa;
38 }
39
40 #navGeneral {
41 position: absolute;
42 /* Posiciona con respecto a otro elemento.*/
43 position-anchor: --hamburguesa;
44 /* Extremo superior cuando no se soporta position-anchor, */
45 top: 3.5rem;
46 /* El extremo superior va debajo de la hamburgjesa, */
47 top: anchor(bottom);
48 /* Extremo izquierdo cuando no se soporta position-anchor, */
49 left: 0.5rem;
50 /* El extremo izquierdo se alinea con la izquierda de la hamburgjesa, */
51 left: anchor(left);
52 /* Evita que se centre el contenido, */
53 margin: unset;
54 }
55
56 header {
57 display: none;
58 }
59
60 main {
61 flex-grow: 1;
62 align-self: stretch
63 }
64
65 }
66
67 @media screen and (min-width: 600px) {
68 body {
69 display: grid;
70 column-gap: var(--gap);
71 align-items: baseline;
72 grid-template-columns: 1fr 20vw;
73 grid-template-rows: auto 1fr auto;
74 grid-template-areas:
75 "head head"
76 "main aside"
77 "foot foot";
78 }
79
80 menu {
81 display: none;
82 }
83
84 header nav ul {
85 display: inline-flex;
86 list-style-type: none;
87 padding: 0;
88 margin: 0;
89 gap: var(--gap);
90 justify-content: center;
91 }
92
93 header nav ul p {
94 margin: 0;
95 }
96
97 main {
98 grid-area: main;
99 min-height: 50vh;
100 overflow: auto;
101 }
102
103 aside {
104 grid-area: aside;
105 }
106
107 footer {
108 grid-area: foot;
109 display: flow-root;
110 text-align: center;
111 }
112
113 }
114 </style>
115
116</head>
117
118<body>
119
120 <menu>
121 <li>
122 <button id="hamburguesa" type="button" popovertarget="navGeneral">≡</button>
123 </li>
124 <li>
125 <h1>@media</h1>
126 </li>
127 </menu>
128
129 <nav id="navGeneral" popover="auto">
130 <h2>Enlaces externos</h2>
131 <ul>
132 <li>
133 <p>
134 <a target="_blank" rel="noreferrer" href="https://savethecat.com/">
135 Salvar al gato.
136 </a>
137 </p>
138 </li>
139 <li>
140 <p>
141 <a target="_blank" rel="noreferrer" href="https://www.showrunner.xyz/">
142 Showrunner
143 </a>
144 </p>
145 </li>
146 <li>
147 <p>
148 <a target="_blank" rel="noreferrer" href="https://google.com/">
149 Google
150 </a>
151 </p>
152 </li>
153 </ul>
154 </nav>
155
156 <header>
157 <h1>@media</h1>
158 <nav>
159 <ul>
160 <li>
161 <p>
162 <a target="_blank" rel="noreferrer" href="https://savethecat.com/">
163 Salvar al gato.
164 </a>
165 </p>
166 </li>
167 <li>
168 <p>
169 <a target="_blank" rel="noreferrer" href="https://www.showrunner.xyz/">
170 Showrunner
171 </a>
172 </p>
173 </li>
174 <li>
175 <p>
176 <a target="_blank" rel="noreferrer" href="https://google.com/">
177 Google
178 </a>
179 </p>
180 </li>
181 </ul>
182 </nav>
183 </header>
184
185 <main>
186 <p>
187 Este ejemplo usa @media para
188 seleccionar el display
189 de la página principal.
190 </p>
191 <p>
192 Lorem ipsum dolor sit amet
193 consectetur adipisicing elit.
194 Omnis, eius. Quaerat alias
195 facilis recusandae, voluptate
196 cumque quod tenetur
197 necessitatibus exercitationem
198 beatae cupiditate iste
199 voluptatum, optio debitis
200 deserunt laboriosam placeat
201 odit?.
202 </p>
203
204 </main>
205
206 <aside>
207 <h2>Aside</h2>
208 <p>
209 Este aside cambia su despliegue.
210 </p>
211 </aside>
212
213 <footer>
214 <p>
215 © 2025
216 Gilberto Pacheco Gallegos
217 </p>
218 </footer>
219
220</body>
221
222</html>

Solo para los más rudos

skip_previous skip_next