Guía de diseño adaptativo moderno

En The Guide To Responsive Design In 2023 and Beyond se explica todo esto:

Using Modern CSS

  • The typography is responsive to the viewport width via clamp() function.
  • The spacing is responsive to the viewport width via clamp() function.
  • The hero section is responsive to its content via flexbox wrapping.
  • The cards grid is responsive to the available space with minmax(), no media queries.
  • The card component is responsive to its wrapper via size container queries and style container queries.
  • The margins and paddings are responsive to the websites language via logical properties.

Using Media Queries

  • The site navigation is responsive to the viewport width.
  • The theming is responsive to the user preferences in their operating system.
  • The card hover effect is responsive to what the user is using (touch vs mouse).

Profesor del Departamento de Lenguajes y Sistemas Informáticos de la Universidad de Alicante (España). Interesado en el desarrollo y la accesibilidad web.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

*

This site uses Akismet to reduce spam. Learn how your comment data is processed.