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?
How can I make Respond.js and LESS.js play nice together?
664 Views Asked by Ezequiel At
1
There are 1 best solutions below
Related Questions in JAVASCRIPT
- Angular Show All When No Filter Is Supplied
- Why does a function show up as not defined
- I count the time the user takes to solve my quiz using Javascript but I want the same time displayed on another page
- Set "More" "Less" font size
- Using pagination on a table in AngularJS
- How to sort these using Javascript or Jquery Most effectively
- how to fill out the table with next values in array with one button
- State with different subviews
- Ajax jQuery firing multiple time display event for the same result
- Getting and passing MVC Model data to AngularJS controller
- Disable variable in eval
- javascript nested loops waiting for user input
- .hover() seems to overwrite .click()
- How to sort a multi-dimensional array by the second array in descending order?
- How do I find the fonts that are not loading in a CORS situation ( MoovWeb )?
Related Questions in CSS
- CSS Class is not applying to element (border width,color,and style attributes)
- How do I find the fonts that are not loading in a CORS situation ( MoovWeb )?
- Positioning child at bottom of parent with scroll
- Play multiple audio files in a slider
- How to set text over image?
- Website zoomed out on Android default browser
- Writing/Overwriting to specific XML file from ASP.NET code behind
- My navbar is not expanding after collapse
- when a checkbox is checked how to display a different hidden element using javascript
- Gaps Vertically Using Dividers
- CSS: Preventing a property to affect on element until the end of transition
- Polygon Button with pure CSS
- transform-origin doesnt apply in safari
- show/hide multiple div tags at once and change the size of the remaining div tag
- Mask the image/maps/div (circle) using css and jquery
Related Questions in LESS
- Less beautifier - format code
- Error when assetic with lessphp try to compile a LESS file
- How to pass a LESS variable into a class name
- Compile LESS files with Grunt from multiple directories into single one, at given path
- Dependent Files with Less for Visual Studio
- How can I use LESS in jsfiddle?
- LESS CSS - &:focus not working in variable selector
- Less - How to replace integer with a string?
- Styledocco not rendering LESS, but applying the style
- Hover color cross-site for each color
- LESS not outputting source map
- Compile variables.less file to where? FLAT UI
- Compile Less with Node, with dynamic variables
- Bootstrap Navbar-Brand Text not shrinking
- Symfony Assetic, Lesscss and cssrewrite
Related Questions in RESPOND.JS
- Respond.min.js works only in IE 8 emulation mode of IE 11
- respond.js not working in IE8 with Bootstrap 3
- Why does ie9.js kill respond.js in bootstrap?
- Respond.js not working locally - Support for media queries in IE8
- Do I have to include respond.js in the header?
- internet explorer, modernizr.js, respond.js, html5shiv.js, ie-7.js compatibility
- How can I apply 2 media queries in IE8 with respond JS?
- IE8 Bootstrap Respond.JS, List Items Not Horizontal
- How to make respond.js work without a web server
- Mobile-First Responsive Design IE 8 Widescreen Compatibility
- Why bootstrap.css must be in the same domain with the html when we use htmlshiv.js and respond.js to make IE7 compatible?
- Rails, Foundation 4, Respond.js not working properly in IE8
- Bootstrap 3 Not Working in IE8
- can respond.js process an internal stylesheet
- Removing Respond.js from ASP.NET MVC 5 template
Trending Questions
- UIImageView Frame Doesn't Reflect Constraints
- Is it possible to use adb commands to click on a view by finding its ID?
- How to create a new web character symbol recognizable by html/javascript?
- Why isn't my CSS3 animation smooth in Google Chrome (but very smooth on other browsers)?
- Heap Gives Page Fault
- Connect ffmpeg to Visual Studio 2008
- Both Object- and ValueAnimator jumps when Duration is set above API LvL 24
- How to avoid default initialization of objects in std::vector?
- second argument of the command line arguments in a format other than char** argv or char* argv[]
- How to improve efficiency of algorithm which generates next lexicographic permutation?
- Navigating to the another actvity app getting crash in android
- How to read the particular message format in android and store in sqlite database?
- Resetting inventory status after order is cancelled
- Efficiently compute powers of X in SSE/AVX
- Insert into an external database using ajax and php : POST 500 (Internal Server Error)
Popular Questions
- How do I undo the most recent local commits in Git?
- How can I remove a specific item from an array in JavaScript?
- How do I delete a Git branch locally and remotely?
- Find all files containing a specific text (string) on Linux?
- How do I revert a Git repository to a previous commit?
- How do I create an HTML button that acts like a link?
- How do I check out a remote Git branch?
- How do I force "git pull" to overwrite local files?
- How do I list all files of a directory?
- How to check whether a string contains a substring in JavaScript?
- How do I redirect to another webpage?
- How can I iterate over rows in a Pandas DataFrame?
- How do I convert a String to an int in Java?
- Does Python have a string 'contains' substring method?
- How do I check if a string contains a specific word?
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