How to toggle css media queries on and off


Tags: css

Problem :

I am trying to set up link at the bottom of my website like this:

Regular view | Mobile view

Right now the css file contains media query for regular and mobile views so it automatically adjusts depending on the screen size. How can i let the user control that with the links?



Solution :

If you put all of the media queries in one file, you can disable them with this:

document.getElementById('my-css-file').disabled = true;

Live demo here (click).


    CSS Howto..

    How to loop through divs with no knowledge of what the user viewed and what they WANT to view

    How to position two divs one on each other at the bottom of parent?

    how can I center button below my text while using bootstrap css?

    How to remove margin space around body or clear default css styles

    Why my easypie number don't show inside?

    How can I set up a static Webkit Mask

    CSS Web fonts how to use it with use of @font-face its not working

    How do I center a menu option under it's heading option in a drop down menu?

    How to place a css counter-increment below a paragraph of text?

    CKEditor 4: How to add CSS stylesheet from plugin?

    Why does first slideshow image click skip transition and go straight to image?

    How do you explain this div spacing issue?

    how can i center the footer text in the bottom of the page regardless of screen size

    How to vertically and horizontally centre text with a variating font size in CSS

    How to make hover buttons?

    How to change the indentation of all the lines except the first line in bulleted or non bulleted list?

    How to style HTML5 input type=“datetime-local” [duplicate]

    How to make a curved triangle speech bubble with pseudo-elements?

    How to dynamically resize HTML element according to it's sibling size using CSS only?

    How do I get my div to overlay on top of other table rows?

    How to size relative div which haven't a content?

    Using jQuery, how to find out if CSS selector “input[type=text]” is natively supported by browser?

    How to center a banner and keep margin?

    How to accomplish onHover event without a second image

    How to Surround Links with Bounding Box Using CSS

    How to rotate image in relation to mouse position?

    How can I override inline styles with external CSS?

    How to decode base64-encoded font information?

    How to explain using browser.sleep in protractor

    How to hover over the whole button in css