Measuringstick.png – overlay for testing CSS media queries

This image provides checkpoints for common browser sizes taken form our Google Analytics reports. Add it as a CSS overlay to any page to test CSS media queries for responsive design.

<html>
<head>
<style type="text/css">
	.measuringstick {
		background: url("http://endreywalder.com/measuringstick.png") no-repeat scroll 0 0 transparent;
		height: 100%;
		left: 0;
		position: absolute;
		top: 0;
		width: 100%;
		z-index: 9999;
		pointer-events:none; /* allow to click through it */
	}

       /* put media queries here */
       @media (min-width:980px) { }
       @media (min-width:450px) and (max-width:950px) { }
       @media (max-width:1024px) { }
       @media (max-width:899px) { }
       @media (max-width:450px) { }

</style>
<!--[if IE]>
  <style type="text/css">
        /* allow to click through it */
	.measuringstick {
	  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://endreywalder.com/measuringstick.png', sizingMethod='scale');
	  background:none !important;
	}

   </style>
<![endif]-->
</head>
<body>
   <div class="measuringstick"></div>    
</body>
</html>