I have just started to work on responsive web design. Do media queries handle downloading components or where the process is handled ? The reason for this question is When we using different sized images in our web pages , say for example 1x image is been downloaded for smartphones , 2x images are downloaded for tablets , 4x images are downloaded for desktop browsers . Will all the sized images will get downloaded for all the browsers or How this is handled in responsive web design ? How it is applicable to all web components ?
Asked
Active
Viewed 50 times
-1
-
Media queries simply define where certain CSS rules are applied, nothing else. – Sparky Jul 19 '15 at 15:54
1 Answers
0
I will describe the strategy for every kind of assets.
Images
The whole idea of conditional loading is not to load images with a size bigger than needed.
The articles, that you can find on that matter make perfect sense, but still they are a bit tricky to implement, since the final solution will rely mostly on the back-end.
The most used technique is fairly simple: you use JavaScript methods for screen width/device detection and load a corresponding image size.
CSS
For conditional loading you can use media attribute of <link> tag. The attribute is used for specifying a @media query, which will control the loading.
Here is an article about Conditional loading of resources with media queries , which explains the usage of the attribute in details. It's quite old, but the rules are the same even today.
JavaScript
The control of JavaScript assets is entirely up to you. I'm not going to talk about module loaders.
Window.matchMedia() is the media-query based condition checker, that can be used for asset loading, if you're satisfied with browser-support.
Outdated, but quite more user friendly window.outerWidth
Browser detection is described in the following question.
