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

Solo para los más rudos

skip_previous skip_next