Ellyria/HTML5 Skeleton - Responsive.html

## HTML5 Skeleton - Responsive.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- ================================================== -->
		<title>HTML5 Skeleton</title>
		<!-- ================================================== -->
		<meta charset="utf-8" />
		<!-- ================================================== -->
		<!-- Optional support for older (IE9 or older) Microsoft browsers: -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<!-- ================================================== -->
		<!-- Automatically scale contents to viewport size and orientation and specify a maximum scale and disable zooming on mobile devices: -->
		<!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> -->
		<!-- ================================================== -->
		<!-- Automatically scale contents to viewport size and orientation and specify a maximum scale: -->
		<!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1 /> -->
		<!-- ================================================== -->
		<!-- Automatically scale contents to viewport size and orientation: -->
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<!-- ================================================== -->
		<style>
			*, *:before, *:after {
				box-sizing: inherit;
				}
			abbr,acronym {/*CSS RESET*/
				border:0;
				}
			address,caption,cite,code,dfn {/*CSS RESET*/
				font-style:normal;
				font-weight:normal;
				}
			article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {/*BACKWARD COMPATIBILITY*/
				display: block;
				}
			blockquote,body,div,h1,h2,h3,h4,h5,h6,html,li,ol,p,ul {/*CSS RESET*/
				margin:0;
				padding:0;
				}
			html {
				box-sizing: border-box;
				}
			unknown-element-name {/*UNKNOWN ELEMENT*/
				display: block;
				}
			/*** PHONES OR SMALLER ************************************/
			@media only screen and (max-width: 599px) {
				body {
					background-color: yellow;
					}
				}
			/*** PORTRAIT TABLET **************************************/
			@media only screen and (min-width: 600px) {
				body {
					background-color: green;
					}
				}
			/*** LANDSCAPE TABLET *************************************/
			@media only screen and (min-width: 900px) {
				body {
					background-color: orange;
					}
				}
			/*** LAPTOP ***********************************************/
			@media only screen and (min-width: 1200px) {
				body {
					background-color: dodgerblue;
					}
				}
			/*** DESKTOP OR BIGGER ************************************/
			@media only screen and (min-width: 1800px) {
				body {
					background-color: violet;
					/*background-color: hsl(300, 25%, 35%);*/
					}
				}
		</style>
	</head>
	<body>

	</body>
	<!-- ================================================== -->
	<!-- JavaScript at end for faster page loading. -->
	<!-- ================================================== -->
	<!-- Help older browsers to handle unknown elements (see also the style element): -->
	<!-- <script>document.createElement("unknown-element-name");</script> -->
	<!-- ================================================== -->
	<!-- Help older browsers to handle unknown elements: -->
	<!--[if lt IE 9]>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
		<script src="/js/html5shiv.js"></script>
	<![endif]-->
	<!-- ================================================== -->
	<!-- Penn Foster recommended way to help older browsers to handle unknown elements: -->
	<!--[if lt IE 9]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<!-- ================================================== -->
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<!-- ================================================== -->
	<title>HTML5 Skeleton</title>
	<!-- ================================================== -->
	<meta charset="utf-8" />
	<!-- ================================================== -->
	<!-- Optional support for older (IE9 or older) Microsoft browsers: -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<!-- ================================================== -->
	<!-- Automatically scale contents to viewport size and orientation and specify a maximum scale and disable zooming on mobile devices: -->
	<!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> -->
	<!-- ================================================== -->
	<!-- Automatically scale contents to viewport size and orientation and specify a maximum scale: -->
	<!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1 /> -->
	<!-- ================================================== -->
	<!-- Automatically scale contents to viewport size and orientation: -->
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<!-- ================================================== -->
	<style>
	, :before, *:after {
	box-sizing: inherit;
	}
	abbr,acronym {/CSS RESET/
	border:0;
	}
	address,caption,cite,code,dfn {/CSS RESET/
	font-style:normal;
	font-weight:normal;
	}
	article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {/BACKWARD COMPATIBILITY/
	display: block;
	}
	blockquote,body,div,h1,h2,h3,h4,h5,h6,html,li,ol,p,ul {/CSS RESET/
	margin:0;
	padding:0;
	}
	html {
	box-sizing: border-box;
	}
	unknown-element-name {/UNKNOWN ELEMENT/
	display: block;
	}
	/* PHONES OR SMALLER **********************************/
	@media only screen and (max-width: 599px) {
	body {
	background-color: yellow;
	}
	}
	/* PORTRAIT TABLET ************************************/
	@media only screen and (min-width: 600px) {
	body {
	background-color: green;
	}
	}
	/* LANDSCAPE TABLET ***********************************/
	@media only screen and (min-width: 900px) {
	body {
	background-color: orange;
	}
	}
	/* LAPTOP *********************************************/
	@media only screen and (min-width: 1200px) {
	body {
	background-color: dodgerblue;
	}
	}
	/* DESKTOP OR BIGGER **********************************/
	@media only screen and (min-width: 1800px) {
	body {
	background-color: violet;
	/background-color: hsl(300, 25%, 35%);/
	}
	}
	</style>
	</head>
	<body>

	</body>
	<!-- ================================================== -->
	<!-- JavaScript at end for faster page loading. -->
	<!-- ================================================== -->
	<!-- Help older browsers to handle unknown elements (see also the style element): -->
	<!-- <script>document.createElement("unknown-element-name");</script> -->
	<!-- ================================================== -->
	<!-- Help older browsers to handle unknown elements: -->
	<!--[if lt IE 9]>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
	<script src="/js/html5shiv.js"></script>
	<![endif]-->
	<!-- ================================================== -->
	<!-- Penn Foster recommended way to help older browsers to handle unknown elements: -->
	<!--[if lt IE 9]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<!-- ================================================== -->
	</html>