Diseño adaptable
Tu sitio web debe verse bien en cualquier pantalla. El editor te permite revisar tus páginas con anchos de teléfono, tablet y escritorio, y aplicar estilos distintos a los elementos según el tamaño de pantalla.
Revisar otros anchos de pantalla
Haz clic en el menú de ancho (el ícono de dispositivo a la izquierda de la barra de ruta) y elige un ancho. El lienzo cambia de tamaño para que veas cómo se ve la página en esa pantalla.
| Opción | Ancho |
|---|---|
| Teléfono pequeño | 320px |
| Móvil | 375px |
| Teléfono grande | 425px |
| Tablet | 768px |
| Escritorio | Ancho completo |
También puedes pulsar D para escritorio, T para tablet (768px) o M para móvil (375px) cuando no estés escribiendo.
Cambiar el ancho no modifica ningún estilo. Solo cambia el tamaño del lienzo.
Aplicar estilos según el tamaño de pantalla
Un estilo puede llevar un prefijo de tamaño de pantalla para que solo se aplique a partir de ese ancho.
| Prefijo | Se aplica a |
|---|---|
sm: | 640px o más |
md: | 768px o más |
lg: | 1024px o más |
xl: | 1280px o más |
Por ejemplo, text-2xl md:text-4xl hace que el texto de un encabezado sea más pequeño en teléfonos y más grande a partir del tamaño de tablet.
Para añadir uno, selecciona el elemento y abre la sección Avanzado del panel de edición. Escribe la clase en el campo Escribe una clase y pulsa Intro y pulsa Enter. Luego cambia de ancho para revisar el resultado.
También puedes pedirlo con tus propias palabras. Selecciona el elemento, pulsa ⌘K / Ctrl+K y escribe algo como "ocultar en móvil" o "apilar en móvil". Consulta Editar con IA.
Ocultar elementos en algunas pantallas
Añade hidden para ocultar un elemento en todas las pantallas y luego añade una clase con un punto de quiebre para mostrarlo a partir de ese ancho:
hidden md:blocklo oculta en teléfonos y lo muestra a partir del tamaño de tablet.md:hiddenlo muestra en teléfonos y lo oculta a partir del tamaño de tablet.