CSS媒体查询->链接与@media [英] CSS Media Queries -> Link vs @media

问题描述

在我看来，在HTML文件中的link>标记中定义媒体查询比在外部CSS文件中使用@media only...定义媒体查询要好得多. 您可以根据目标设备的不同，对大量特定文件进行很好的模块化处理，并且仅将您需要的文件检索出来.我无法想到不使用此方法的单一原因，也不会想到它不具有优越性的单个实例.

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?

谢谢

推荐答案

根据目标设备的不同，您可以很好地模块化大量特定文件，仅会检索您需要的文件.

这(强调的部分)是关于通过<link>元素中的媒体查询加载的样式表的一种非常常见的误解. (您所说的关于文件模块化的说法仍然成立.)

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.)

所有文件都将被加载，而不考虑应用于<link>元素的媒体查询.仅当遇到媒体查询时才会加载文件，因为不能保证浏览器在查看同一页面时某些属性发生更改时不会遇到该文件(甚至停止满足该文件).

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.

例如，如果将移动设备从纵向旋转到横向，它将停止匹配(orientation: portrait)并开始匹配(orientation: landscape).它需要确保后者中的样式在切换到该格式时已准备好应用，因此必须预先加载样式.

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.

<link>元素的 HTML5规范没有完全提及media属性应如何确定是否应加载资源. 媒体查询规范并未定义应如何针对媒体查询加载样式表，但是它指出了注释中的内容:

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.

这篇关于CSS媒体查询->链接与@media的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！