如何让 Respond.js 和 LESS.js 很好地协同工作？
当我使用 LESS.js 和 @media 查询制作响应式布局时，我无法让 Respond.js 工作。有人知道如何让它发挥作用吗？
I can't get Respond.js to work when I make responsive layouts with LESS.js and @media queries. Anyone ever figure out how to make it work?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
Respond.js 的工作方式如下：
浏览器不会向 DOM 甚至样式表内的文本公开所有规则，这意味着旧浏览器中不支持的功能（如媒体查询）不会公开。
为了能够填充媒体查询，它会下载 css 文件本身（希望它位于缓存中）并在其上运行一些正则表达式以过滤掉媒体查询。
然后，它会在新嵌入的样式表中动态添加与窗口尺寸相关的 styleRules，因此即使不支持媒体查询的浏览器也会“看到”这些 styleRules。
我不太熟悉 less.js 的代码库，但浏览一下它似乎以几乎相同的方式工作，处理不同，结果是从 .less 文件完全生成的样式表，但原理大致是相同。
考虑到 respond.js 需要下载文件，并且 respond.update() 也不适用于生成的样式表，因此我认为如果不更改任何一个脚本，这是不可能的。
希望对 PM5544 有帮助
Respond.js works in the following way:
Browsers don't expose all rules to the DOM or even the text inside a style sheet, and that means that unsupported features like media queries in old browsers don't get exposed.
To be able to polyfill media queries it downloads the css file itself (hoping it's in the cache) and runs some regular expressions on it to filter out the media queries.
Than it adds the styleRules relevant for the window's dimension dynamically inside a newly embedded stylesheet so even browsers that don't support media queries "see" those styleRules.
I'm not that familiar with less.js' codebase but glancing over it it seems to work in pretty much the same way, the processing is different and the result is a totally generated stylesheet from the .less file, but the principle is roughly the same.
Given the fact that respond.js needs to download a file and the respond.update() also doesn't work on generated stylesheets because of that i would think that this isn't possible without changing either script.
hope it helps PM5544