jongrover/media-query-example.html

## media-query-example.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #wrapper {
      width: 600px;
      margin: 0 auto;
    }

    header {
        height: 100px;
        background: yellow;
    }

    #toys {
        float: left;
        width: 33.3333%;
        background: aqua;
    }

    #grooming {
        float: left;
        width: 33.3333%;
        background: lime;
    }

    #food {
        float: left;
        width: 33.3333%;
        background: fuchsia;
    }

    @media only screen and (max-width: 568px) {
         #wrapper {
            width: 90%;
        }
        #toys, #grooming, #food {
             float: none;
             width: 100%;
        }
    }

     @media only screen and (max-width: 320px) {

        #toys, #grooming, #food {
          color: red;
          font-size: 1.5em;
        }
    }
  </style>
</head>
<body>
  <div id="wrapper">
  <header>
      <h1>Petes Pet Supply</h1>
  </header>
  <section id="toys">
      <h2>Toys</h2>
  </section>
  <section id="grooming">
      <h2>Grooming</h2>
  </section>
  <section id="food">
      <h2>Food</h2>
  </section>
</div>
<script src="http://code.jquery.com/jquery-1.10.2.min.js">
</script>
<script>
  $(window).resize(function() {
    var width = $('html').width();
    console.log(width);
    if (width < 400) {
      $('#toys').fadeTo(200, .2);
    }
  });
</script>
</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	#wrapper {
	width: 600px;
	margin: 0 auto;
	}

	header {
	height: 100px;
	background: yellow;
	}

	#toys {
	float: left;
	width: 33.3333%;
	background: aqua;
	}

	#grooming {
	float: left;
	width: 33.3333%;
	background: lime;
	}

	#food {
	float: left;
	width: 33.3333%;
	background: fuchsia;
	}

	@media only screen and (max-width: 568px) {
	#wrapper {
	width: 90%;
	}
	#toys, #grooming, #food {
	float: none;
	width: 100%;
	}
	}

	@media only screen and (max-width: 320px) {

	#toys, #grooming, #food {
	color: red;
	font-size: 1.5em;
	}
	}
	</style>
	</head>
	<body>
	<div id="wrapper">
	<header>
	<h1>Petes Pet Supply</h1>
	</header>
	<section id="toys">
	<h2>Toys</h2>
	</section>
	<section id="grooming">
	<h2>Grooming</h2>
	</section>
	<section id="food">
	<h2>Food</h2>
	</section>
	</div>
	<script src="http://code.jquery.com/jquery-1.10.2.min.js">
	</script>
	<script>
	$(window).resize(function() {
	var width = $('html').width();
	console.log(width);
	if (width < 400) {
	$('#toys').fadeTo(200, .2);
	}
	});
	</script>
	</body>
	</html>