[altrum]

I did something very similar recently with my website. With that said, I would not do it again. For doing something—seemingly so simple, the infrastructure work was a pain.

Also, while I’m at it, static websites are, in my opinion, a little “gimmicky” since it’s impossible to determine the user’s browser size at build time. This means that you have to make a choice to build for either mobile or desktop first. Then, if the user is using the other device, they’ll encounter the FOUC issue (flash of unstyled content).

For me, that’s big enough reason to not use static websites in the future.

[robertoandred]

What? Why aren’t you using media queries?

[altrum]

I am using media queries—while they work, they’ll flash the “unadapted” version depending on what component is rendered first. The alternative is to add some kind of loading aspect to each component but I think it’s not very scalable

[onion2k]

they’ll flash the “unadapted” version depending on what component is rendered first

A normal CSS file is render blocking so the DOM content won't be displayed until the browser has downloaded it, parsed it, and knows what to display. If you move your main layout styles out of the component (presumably this is using styled components or similar?) and in to a CSS file that's defined as a <link> in the header of the page then that problem will go away (or a <style> tag in the header if you're worried about the additional fetch). This is how browsers have been designed to work.

[ssijak]

Use CSS to style the same site for different device sizes