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?
Share
Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
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?
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