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).