Is there any best practice for handling Visual States in .NET Maui Blazor Hybrid?

Question

Is there any best practice for handling Visual States per platform (Android/iOS), per orientation (Portrait/Landscape) and per device type (Phone/Tablet) in .NET Maui Blazor Hybrid like .NET Maui handles with Visual State Manager in xaml files?

For example I have already implementated a logic to support Dark & Light theme with css variables but I need to find a best practice to handle some css properties (e.g. a bootstrap card padding) differently in some cases (per platform, per orientation & per device type).

I thought to implement some custom converter to handle these actions and use it in every .razor page, but is it the best practice?

Thanks in advance

Answer 1

By default, the projects we build here are using bootstrap.

Bootstrap supports responsive layout, which can already meet your basic needs, we only need to add styles according to the format of bootstrap. If you write a custom converter by yourself, you need to use @media, and you have to write a lot of native CSS code, the effect of time-consuming and laborious production may not be as good as the effect of bootstrap.