I’m creating a character sheet, and I don’t want it to behave erratically when zoomed, like many sheets do. Looking at examples, there is not much consistency.
Setting sizes with px seems to cause problems, except for a min-width to fix problems.
What does the zoom actually do to the CSS of the sheet?
Would using em or rem be the best way to go?
Wraithmoor said:
I’m creating a character sheet, and I don’t want it to behave erratically when zoomed, like many sheets do. Looking at examples, there is not much consistency.
Setting sizes with px seems to cause problems, except for a min-width to fix problems.
What does the zoom actually do to the CSS of the sheet?
Would using em or rem be the best way to go?
It depends on what you mean by erratically. Some sheets are built assuming a specific range of widths (or just a basic minimum width), and when the zoom causes the rendered content to become too large for the iframe, they can become unwieldly. The best way to fix this issue is to design your sheet with responsive layout in mind. Use flexbox to cause things to wrap automatically and CSS grid to create layouts that grow and shrink as needed.
Pixel values can indeed cause some hinkiness when zooming. I think (no real proof) that this is because they get multiplied twice, once when the html container is zoomed in, and then again by themselves. Regardless, em and rem do seem to provide more stability; rem would probably be the most stable.