criography/dabblet.css

## dabblet.css
/**
 * Fuxed Up Media Queries
 */

body,
html{
	padding:0;
	border:0;
	margin:0;
	height:300%;
}

#div{
	position:absolute;
	width:1024px;
	height:100px;
	background:#000;
}

@media only screen and (min-width: 320px){
	#div{
		background:#444;
	}
}


@media only screen and (min-width: 480px){
	#div{
		background:#888;
	}
}


@media only screen and (min-width: 768px){
	#div{
		background:#bbb;
	}
}


@media only screen and (min-width: 1024px){
	#div{
		background:#eee;
	}
}

## dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div id="div"></div>

## settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
	/**
	* Fuxed Up Media Queries
	*/

	body,
	html{
	padding:0;
	border:0;
	margin:0;
	height:300%;
	}

	#div{
	position:absolute;
	width:1024px;
	height:100px;
	background:#000;
	}

	@media only screen and (min-width: 320px){
	#div{
	background:#444;
	}
	}



	@media only screen and (min-width: 480px){
	#div{
	background:#888;
	}
	}



	@media only screen and (min-width: 768px){
	#div{
	background:#bbb;
	}
	}



	@media only screen and (min-width: 1024px){
	#div{
	background:#eee;
	}
	}
	<!-- content to be placed inside <body>…</body> -->
	<div id="div"></div>