MallaDocs
InicioInicio rápidoAbrir Malla

Hazlo responsive

Ajusta una página para tablets y teléfonos con sobrescrituras por punto de quiebre, ajuste de línea, tamaños fluidos y texto más pequeño.

Guía de usuario
Principiante15 min

Vas a construir: Una landing page ajustada para tablets y teléfonos, con anchos fluidos, filas que pasan a la siguiente línea y texto más pequeño

Lee primero: Construye una landing page

En este tutorial tomas una página que se ve bien en escritorio y la ajustas para tablets y teléfonos. Aprendes de dónde viene un valor de estilo, cómo restablecerlo y cómo construir layouts que se adaptan solos. Usa la página del tutorial Construye una landing page, o cualquier página con un hero y una fila de tarjetas.

Hazlo responsiveEl video llegará pronto. Los pasos escritos a continuación cubren todo.
Hazlo responsive· 6 min

Elige un punto de quiebre

  1. Mira las tres mesas de trabajo

    Abre la página. El lienzo muestra una mesa de trabajo por punto de quiebre: Desktop (1440 px), Tablet (768 px) y Phone (390 px). Todas renderizan la misma página, así que un problema en teléfonos se ve mientras trabajas en escritorio.

  2. Cambia con el selector de puntos de quiebre

    El selector de puntos de quiebre está en la barra de herramientas, junto al selector de páginas: un ícono de monitor, uno de tablet y uno de teléfono. Elige el ícono de tablet. La cámara se mueve a la mesa de trabajo de tablet y el encabezado del inspector ahora dice Editing Tablet.

  3. Entiende hacia dónde fluyen los estilos

    Los estilos fluyen de grande a pequeño. Los valores de escritorio se aplican en todas partes. Los valores de tablet sobrescriben los de escritorio en tablets y teléfonos. Los valores de teléfono sobrescriben ambos, solo en teléfonos. Un cambio en escritorio nunca toca los puntos de quiebre más pequeños donde pusiste tu propio valor.

Lee y restablece sobrescrituras

  1. Cambia un valor en tablet

    Con Tablet activo, selecciona el hero y cambia su Padding en la sección Layout. Solo cambian las mesas de trabajo de tablet y teléfono.

  2. Lee el punto junto a la etiqueta

    Ahora aparece un pequeño punto junto a Padding. Pasa el cursor sobre la etiqueta para ver de dónde viene el valor: Set on Tablet para un valor que pusiste aquí, Inherited from Desktop para un valor que viene de un punto de quiebre más grande, o From class .feature-card para un valor que viene de una clase.

  3. Restablécelo

    Haz clic en el punto, o mantén ⌥ y haz clic en la etiqueta. El valor de tablet se elimina y el hero vuelve a tomar el padding de escritorio.

Deja que las filas pasen a la siguiente línea

  1. Activa Wrap

    Vuelve a Desktop y selecciona la fila de características. En Layout → Direction, activa el interruptor Wrap junto a las flechas. Cuando las tarjetas ya no caben, pasan a una nueva línea en lugar de encogerse.

  2. Dale a las tarjetas un ancho mínimo

    Selecciona una tarjeta. Pasa el cursor sobre el encabezado de la sección Size y presiona + (Add min/max). En la nueva fila Min, pon W en 280px. Ahora las tarjetas pasan a la siguiente línea en cuanto alguna quedaría más angosta que 280 px.

  3. Agrega un espacio

    Selecciona la fila otra vez y define Gap en Layout. El mismo espacio separa las tarjetas tanto lado a lado como una encima de otra.

Punto de control

En la mesa de trabajo de tablet, las tarjetas se reparten en dos líneas. Escritorio todavía las muestra en una sola fila. No tuviste que configurar nada en tablet para esto.

Usa tamaños fluidos

  1. Ocupa todo el ancho

    Selecciona la imagen del hero. En Size, pon el modo de Width en Fill. La imagen ocupa todo el ancho de su contenedor en cada punto de quiebre.

  2. Limítala con un máximo

    Presiona + (Add min/max) en el encabezado de Size y pon W en la fila Max en 960px. En escritorio la imagen se detiene en 960 px; en tablet y teléfono sigue ocupando todo el ancho.

  3. Prueba un ancho relativo

    Selecciona el grupo de texto del hero, pon el modo de Width en Relative y escribe 80 (la unidad es %). Los anchos relativos siguen al contenedor, así que el texto mantiene la misma proporción en todas las pantallas.

Ajusta los teléfonos

  1. Cambia a Phone

    Elige el ícono de teléfono en el selector de puntos de quiebre. El encabezado del inspector dice Editing Phone.

  2. Haz el titular más pequeño

    Selecciona el titular. En Typography, baja el tamaño de fuente en la fila Style, por ejemplo de 56px a 36px. Escritorio y tablet conservan su tamaño.

  3. Apila el hero

    Si el hero es un stack horizontal, pon Layout → Direction en Vertical (la flecha hacia abajo) en teléfono. Baja también su Padding para que el contenido tenga espacio.

Revisa el resultado

  1. Vista previa

    Presiona ⌘↵ para ver la vista previa. Luego presiónalo otra vez para volver a editar.

  2. Revisa cada punto de quiebre

    Elige cada punto de quiebre por turno y recorre la página. Selecciona un elemento y pasa el cursor sobre sus etiquetas para ver qué valores están definidos en ese punto de quiebre.

Listo

La página se lee bien en las tres mesas de trabajo: las tarjetas pasan a la siguiente línea en tablet, el titular es más pequeño en teléfono y la imagen nunca supera los 960 px de ancho.

Lo que aprendiste

  • Los valores de escritorio bajan a tablet y teléfono; un punto de quiebre más pequeño solo guarda lo que cambias en él.
  • El punto junto a una etiqueta te dice de dónde viene un valor, y al hacer clic en él lo restableces.
  • Wrap, los tamaños mínimo y máximo, y los anchos Fill y Relative se adaptan solos, así que necesitas menos sobrescrituras.

Sigue con los próximos tutoriales o lee las guías en las que se basa este:

Layout y estilosLayouts flex, grid y libres, las secciones de estilo del inspector, los puntos de quiebre y los estados.Lienzo y mesas de trabajoDesplázate, haz zoom, selecciona e inserta en un lienzo infinito con una mesa de trabajo en vivo por punto de quiebre.Clases y tokensClases reutilizables, clases combinadas, tokens de diseño y fuentes que mantienen todo un sitio consistente.