jbgutierrez/media-query-ie-fallback.html

## media-query-ie-fallback.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title>Media querys IE fallback</title>
    <style>

      p {
        color: blue;
      }

      @media only screen and (max-width: 1024px) {
        p {
          color: green;
        }
      }

      .lt1024 p {
        color: green;
      }

    </style>
  </head>
  <body>
    <!--[if lt IE 9]>
      <script>
        (function() {
          function addClass(element, className){
              if (element.className.indexOf(className) === -1) {
                  element.className = element.className + ' ' + className;
              }
          }
          function removeClass(element, className){
              element.className = element.className.replace(new RegExp('(^|\\s)' + className + '(?:\\s|$)'), '$1');
          }
          function addMediaQueryFallback(){
              if (document.body.clientWidth < 1024) {
                  addClass(document.body, 'lt1024');
              } else {
                  removeClass(document.body, 'lt1024');
              }
          };
          addMediaQueryFallback();
          document.body.onresize = addMediaQueryFallback;
        })();
      </script>
    <![endif]-->
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
    commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
    velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
    occaecat cupidatat non proident, sunt in culpa qui officia deserunt
    mollit anim id est laborum.
    </p>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title>Media querys IE fallback</title>
	<style>

	p {
	color: blue;
	}

	@media only screen and (max-width: 1024px) {
	p {
	color: green;
	}
	}

	.lt1024 p {
	color: green;
	}

	</style>
	</head>
	<body>
	<!--[if lt IE 9]>
	<script>
	(function() {
	function addClass(element, className){
	if (element.className.indexOf(className) === -1) {
	element.className = element.className + ' ' + className;
	}
	}
	function removeClass(element, className){
	element.className = element.className.replace(new RegExp('(^\|\\s)' + className + '(?:\\s\|$)'), '$1');
	}
	function addMediaQueryFallback(){
	if (document.body.clientWidth < 1024) {
	addClass(document.body, 'lt1024');
	} else {
	removeClass(document.body, 'lt1024');
	}
	};
	addMediaQueryFallback();
	document.body.onresize = addMediaQueryFallback;
	})();
	</script>
	<![endif]-->
	<p>
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
	veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
	commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
	velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
	occaecat cupidatat non proident, sunt in culpa qui officia deserunt
	mollit anim id est laborum.
	</p>
	</body>
	</html>