While building a responsive webpage using sveltekit, I found two ways to render different UIs depending on the device width: media queries and bind:innerWidth with svelte:window.
Media query seems to be used very widely in web UI development. According to the device width we set the css display property none or the others. With display: none, the element disappears from the view.
The other way is using <svelte:window bind:innerWidth />. In this way we can bind the window size to a variable and then use the value in <script>. Then we can conditionally render elements using if blocks.
So I got a question. Which way is better in two aspects: optimization and clean code? Considering more details we have numerous ways to build the responsive design, and which way would you choose to achieve this?