Best Practice for Responsiveness?

[jacesimons14]

Hello, loving StyleX so far!

My question is about practice for making responsive applications with StyleX.

1. I setup my project using the nextjs & stylex example in this repo as reference, it comes with fluid fonts and fluid spacing in the globalTokens.stylex file. Which font size does StyleX use when interpreting rem?
2. Is there a method besides rem that people are using for responsiveness? Are any of the relative units more or less performant in StyleX?

Thanks in advance!

[nmn]

The Next.js example repo is based on concepts from utopia.fyi which provides fluid typography. This means the font size grows and shrinks with the browser width while staying readable at all sizes.

You can also use normal rem units for font-sizes and that will work fine.

I would generally recommend using rem units for font-size and any lengths that directly need to match the size of text, but to px units for everything else. This is the best practice for a11y.

---

Are any of the relative units more or less performant in StyleX?

StyleX generated static CSS, so it doesn't change anything about what is performant.