Introduction
Fluent Design System emphasizes adaptability. Scaling is a critical aspect of this, allowing your applications to gracefully adjust to different screen sizes, resolutions, and input methods. This page provides guidance on how to effectively scale your Fluent Design implementations.
Key Considerations
When scaling Fluent elements, consider the following:
- Content Size: Ensure text and other content remain legible and readable, especially at smaller sizes.
- Visual Hierarchy: Maintain the visual hierarchy of your Fluent elements.
- Spacing: Adjust spacing between elements to avoid overcrowding on smaller screens.
- Input Methods: Design for touch input, as touch targets need to be adequately sized.
Example: Scaling a Card
This example demonstrates how to scale a Fluent Card. Note the increased padding and reduced font size to improve readability on smaller screens.
Resources
Explore the full Fluent Design System documentation for more in-depth information: