La mayoría de las visitas verán tu sitio en un teléfono. Remake usa un único diseño para todas las pantallas y te deja ajustarlo para dispositivos más pequeños.
Actualizado el
El menú de dispositivos está en la barra de herramientas. Tiene cuatro opciones:
Escritorio es el predeterminado. Sus estilos se aplican a todas las pantallas salvo que un dispositivo más pequeño los sobrescriba.
Tableta se aplica por debajo de 1024 píxeles de ancho.
Móvil apaisado se aplica por debajo de 768 píxeles de ancho.
Móvil vertical se aplica por debajo de 640 píxeles de ancho.
El menú va de la pantalla más grande a la más pequeña, y los estilos se aplican de arriba abajo. Un estilo definido en Escritorio se aplica a todas las pantallas. Un estilo definido en Tableta se aplica a tableta y a los dos tamaños de móvil. Un estilo definido en Móvil apaisado se aplica a los dos tamaños de móvil. Un estilo definido en Móvil vertical se aplica solo a los teléfonos más pequeños.
Un dispositivo más pequeño puede sobrescribir uno más grande, pero uno más grande no puede sobrescribir uno más pequeño.
Esto es lo contrario del enfoque mobile-first que quizá hayas visto en otros sitios. Encaja con cómo construyes en Remake: empiezas con el diseño completo y luego lo ajustas para pantallas más pequeñas.
Por ejemplo, un encabezado puede ser de 48 píxeles en Escritorio, 36 píxeles en Tableta y 28 píxeles en Móvil vertical. Cada tamaño hereda el de arriba hasta que lo cambias.
Empieza por el diseño de escritorio. Luego cambia a un dispositivo más pequeño y modifica solo lo que haga falta.
Las filas apilan sus columnas en pantallas pequeñas, así que un diseño de dos columnas se convierte en una sola columna en un teléfono. Además, las columnas dejan de forzar su ancho y permiten que el contenido encaje.
Esto significa que no tienes que rehacer cada diseño para móvil. Sobre todo necesitas revisar el espaciado, los tamaños de letra y las imágenes.
Cambia a Móvil vertical y prueba esto:
Reduce los encabezados grandes.
Reduce el relleno de las secciones.
Haz que los botones ocupen todo el ancho cuando cueste pulsarlos.
Sustituye una imagen decorativa por otra que encaje en el espacio más pequeño.
Si quitas algo para hacer sitio, asegúrate de que la página siga teniendo sentido sin ello.
Un encabezado que luce espectacular en un escritorio puede abrumar en un teléfono. Selecciona el encabezado, cambia a Móvil vertical y pon un tamaño más pequeño.
Haz lo mismo con los párrafos largos si el texto queda apretado. El texto del cuerpo debe seguir siendo legible sin hacer zoom.
El relleno de escritorio suele ser demasiado generoso en un teléfono. Cambia a Móvil vertical y reduce el relleno de secciones y tarjetas.
Deja suficiente espacio alrededor de botones y enlaces. Un objetivo táctil apretado resulta frustrante.
Las imágenes se reducen con su contenedor. Comprueba que la parte importante de la foto sigue viéndose después del recorte.
Si un banner ancho pierde su motivo en móvil, usa otra imagen para el diseño móvil o coloca el motivo más cerca del centro.
El menú de estados junto al menú de dispositivos te deja dar estilo al estado hover. El hover no existe en las pantallas táctiles, así que nunca pongas información esencial solo en un estado hover.
Usa el hover para un pequeño cambio de color o una sombra elevada. No lo uses para revelar un menú que no se puede abrir tocándolo.
El mismo menú de estados te deja dar estilo a un enlace cuando apunta a la página en la que está el visitante. Selecciona Página actual en el menú de estados y aplica el estilo: por ejemplo current:underline o current:text-brand-600.
La coincidencia es exacta e ignora la cadena de consulta. /blog es la página actual en /blog y en /blog?page=2, pero no en /blog/post. Los enlaces a otros sitios y los enlaces mailto: y tel: nunca coinciden, así que un elemento del menú que apunta a otro lugar no se resalta por accidente.
La página publicada marca el enlace con el atributo estándar aria-current="page", así que funciona sin JavaScript, también en las páginas estáticas exportadas. El lienzo del editor muestra el mismo estado mientras diseñas la página.
El lienzo del editor no es un teléfono. Cambia el tamaño de la ventana del navegador para ver cómo se estrecha el diseño y luego abre el sitio publicado en un teléfono de verdad.
Comprueba:
El menú se abre y se cierra.
Los formularios son fáciles de rellenar.
Los botones son lo bastante grandes para pulsarlos.
El texto no se desborda ni se corta.
Las imágenes siguen mostrando el motivo correcto.
Construye la página en Escritorio.
Cambia a Tableta y arregla el apiñamiento evidente.
Cambia a Móvil vertical y reduce los tamaños de encabezado y el relleno.
Ajusta el hueco o el espaciado de cualquier fila que siga apretada.
Cambia el tamaño de la ventana del navegador para revisar el diseño estrecho.
Publica y comprueba la página en vivo en un teléfono real.
Lee La pestaña Caja para los controles de espaciado y Texto y fuentes para los tamaños de letra.
Si escribes clases personalizadas, usa los mismos prefijos max-lg:, max-md: y max-sm:. Lee Clases personalizadas (avanzado) para la sintaxis.
Un creador de sitios web que funciona como un documento. CMS, formularios y alojamiento en la UE incluidos.
© 2026 Remake. Todos los derechos reservados.
