Implement Responsive Design in devices.css using getCqi Function and inline-size Container Type

[scheibome]

Summary

This pull request proposes enhancements to the devices.css for improving its responsiveness across various devices. It introduces the getCqi function and leverages the CSS container-type: inline-size to replace fixed pixel measurements with a dynamic, device-responsive approach.

Changes

• Added the getCqi function to the package's CSS utility functions.
• Updated existing CSS rules in the package, replacing fixed pixel values with calls to the getCqi function.
• Applied container-type: inline-size to relevant containers within the package for dynamic adaptation to device widths.

Rationale

Fixed pixel values in CSS lead to a non-responsive design that doesn't accommodate the vast array of device screen sizes available today. The adoption of a more responsive design is crucial to ensure usability across all devices.

Responsive Design

The introduction of the getCqi function allows dynamic adjustment of sizes based on the device's width. This ensures that layouts and element sizes are flexible and automatically adapt to different screen sizes.

Scalability

The use of calc() with relative units (1cqi) related to the device's width enables proportional scaling of elements. This maintains a consistent user experience across devices.

Maintenance and Readability

Defining sizes with the getCqi function not only simplifies maintenance but also enhances code readability. It provides a clear understanding of how elements will resize and adjust across different devices.

Accessibility

Using relative sizes for elements ensures appropriate scaling on various devices, especially important for users with accessibility needs.

Testing

• Conducted extensive device and screen size testing to ensure the responsiveness of the package.
• Performed cross-browser testing to verify consistent behavior across different web browsers.

Conclusion

Integrating these changes into devices.css will significantly enhance its responsiveness, ensuring a better and more consistent user experience across all device types and screen sizes.

[scheibome]

This would also resolve Issue #7

[opensourcecheemsburgers]

Firefox does not support cqi or at least has put it behind a feature flag.

For anyone wondering how to make the devices responsive, you need to place the devices inside of a div with a container type of inline-size.

[scheibome]

Firefox has supported cgi as a length unit, as used in my pull request, for more than a year.

https://caniuse.com/mdn-css_types_length_container_query_length_units

[opensourcecheemsburgers]

My bad, it also seems that the feature flag in question is enabled by default.

Is it possible to style devices according to height i.e. in a flex row?