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
- Using Puppeteer to scrape a public API only when the data changes
- inline SVG text (js)
- An array of images and a for loop display the buttons. How to assign each button to open its own block by name?
- Storing the preferred font-size in localStorage
- Simple movie API request not showing up in the console log
- Authenticate Flask rest API
- Deploying sveltekit app with gunjs on vercel throws cannot find module './lib/text-encoding'
- How to request administrator rights?
- mp4 embedded videos within github pages website not loading
- Scrimba tutorial was working, suddenly stopped even trying the default
- In Datatables, start value resets to 0, when column sorting
- How do I link two models in mongoose?
- parameter values only being sent to certain columns in google sheet?
- Run main several times of wasm in browser
- Variable inside a Variable, not updating
Related Questions in CSS
- How to use custom font during html to pdf conversion?
- Storing the preferred font-size in localStorage
- mp4 embedded videos within github pages website not loading
- Is there any way to glow this bulb image like a real light bulb
- What can I do to improve my coding on both html and css
- Uncaught TypeError: google.maps.LatLng is not a constructor at init (script.js:7:13)
- Bootstrap modal not showing at the desired position on a web page when the screen size is smaller
- How to increase quality of mathjax output?
- Hover animation resetting( seemingly reverting back to original CSS and then again to hover)when moving mouse horizontaly accross a part of an element
- Storing selected language in localStorage
- How to clip grid cell and provide scroll as well?
- KeyboardAvoidingView makes a messy the flexbox
- Rotate an object around another object in javascript
- Understanding Scroll Anchoring Behavoir
- how to use only block layout in this css code?
Related Questions in LESS
- how to use less variables in vue components?
- Angular version 17, is it possible and how to connect several preprocessors (LESS, SASS, SCSS, etc.)
- Set background conditional on child class
- How to loop a nested ruleset in less?
- Extend backround-image via LESS - add rule to existing one
- How use maps in less mixins
- magento 2.4.6 styles overide issue
- Looking for active and supported maven plugin to compile less to css?
- How to get MSBuild target to run whenever an input file changes?
- How to apply class style on everything but a specific class and its children?( Nested Theme )
- MacOS Django Less Issue
- VS Code 1.86 Less syntax highlighting not correct
- How to write a :not() CSS exclusion working in every cases?
- Preventing 3rd party CSS pollution in Angular
- Encapsulating styles in less causes problem in styles of react bootstrap modal
Related Questions in RESPOND.JS
- issue with bootstrap basic template
- jQuery .on() function with Respond.js
- Issue with bootstrap 3.3.4 forms in IE7
- Removing Respond.js from ASP.NET MVC 5 template
- twitter bootstrap not working in ie8 on the top site (i.e. www.exampleurl.com)
- Respond.min.js works only in IE 8 emulation mode of IE 11
- Respond.js crossdomain proxy not working
- Bootstrap 3 + IE11 + HTML5 not working
- IE8 Bootstrap Respond.JS, List Items Not Horizontal
- respond.js not working in IE8 with Bootstrap 3
- Respond.js (IE8, Bootstrap 3) works on localhost, but not in production
- Media Queries with Internet Explorer 8
- IE8 ignoring media queries w/ respond.js
- respond.min.js, line 5 character 746, access is denied , in IE8?
- Load respond.js after page load
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 # Hahtags
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