I have recently learned that HTML Link tags accept a media attribute to conditionally load resources. This can be used to, for example, load a different stylesheet for a print media or for a specific screen size.
I have created a page where I'm loading a different stylesheet depending on the width of the viewport. In the example I have a stylesheet for the base styles, which are always loaded. I have another stylesheet which is only loaded on mobile screen sizes, another one for tablet and, finally, one for desktop.
You can see it in action here.
Check the <link> tags of the page and see how the stylesheets are loaded depending on the viewport width.
