问题
It seems to me that it is infinitely better to define media queries in the HTML file within the link> tag rather than by using @media only... in external CSS files.
You can have a large number of specific files modularized quite nicely and extremely specifically depending on what device is being targeted, and only the files you need will be retrieved. I can't think of a single reason not to use this method, or a single instance where it would not be superior.
And yet, I've been unable to verify this. Can anyone offer any scientific evidence / proof to support or invalidate my theory?
Thanks
回答1:
You can have a large number of specific files modularized quite nicely and extremely specifically depending on what device is being targeted, and only the files you need will be retrieved.
This (the emphasized portion) is a very common misconception about stylesheets loaded via media queries in <link> elements. (What you said about modularization of files still holds true.)
All files will be loaded regardless of the media queries being applied to <link> elements. A file is not loaded only when a media query is met, because there is no guarantee that the browser won't meet it (or even stop meeting it) when some of its properties change while viewing the same page.
For instance if you rotate a mobile device from portrait to landscape, it would stop matching (orientation: portrait) and start matching (orientation: landscape). It needs to make sure the styles in the latter are ready to apply as it switches to that format, so the styles have to be loaded beforehand.
The HTML5 spec for the <link> element does not make any mention of how the media attribute should determine whether or not a resource should be loaded. The Media Queries spec doesn't define how style sheets should be loaded with respect to media queries, however it does state this in a note:
User agents are expected, but not required, to re-evaluate and re-layout the page in response to changes in the user environment, for example if the device is tilted from landscape to portrait mode.
来源：https://stackoverflow.com/questions/20875888/css-media-queries-link-vs-media