search

webaverse-studios / CharacterCreator

3D Avatar Creator for Everyone
https://moemate.io
MIT License
84 stars 47 forks source link

Make all CSS relative and responsive #120

Open lalalune opened 1 year ago

lalalune commented 1 year ago

Right now we have a lot of fixed-size elements which dont look great on different screens. We should make sure that these are using EM, vh or % units where possible and scales well on different screens.

soulofmischief commented 1 year ago

Sounds good. Some notes...

Most of the time em should only be reserved for text or text-dependent style (like padding around text)

This applies to vh/vw and percentages as well when dealing with UI. Most UI elements should probably be fixed-size and make use of media queries in order to change between a few predetermined size buckets... and then should naturally flow from screen edges.

We want text to remain crisp and so we can't rely on fractional UI scaling, plus we also want to maintain text/graphic ratios. So media query buckets give us responsiveness while not sacrificing text clarity. UI scaling can still be a last resort for weird devices... and HUD scaling can be an in-game option so people can dial it in.