Ellyria/jQuery Skeleton - Responsive.html

## jQuery Skeleton - Responsive.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- ================================================== -->
		<title>jQuery 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>
			/********** PHONE OR SMALLER ******************************/
			* {/*INCLUDE BORDER AND PADDING WITHIN HEIGHT AND WIDTH*/
				box-sizing: border-box;
				}
			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;
				}
			body {
				background-color: yellow;
				}
			/********** TABLET ****************************************/
			@media screen and (min-width: 769px) {
				body {
					background-color: green;
					}
				}
			/********** LAPTOP ****************************************/
			@media screen and (min-width: 992px) {
				body {
					background-color: red;
					}
				}
			/********** DESKTOP OR BIGGER *****************************/
			@media screen and (min-width: 1200px) {
				body {
					background-color: violet;
					}
				}
		</style>
	</head>
	<body>


	</body>
	<!-- ================================================== -->
	<!-- JavaScript at bottom for faster page loading. -->
	<!-- ================================================== -->
	<!-- 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]-->
	<!-- ================================================== -->
	<!-- jQuery library: -->
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js"></script>
	<script type="application/javascript">window.jQuery || document.write('<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">\x3C/script>')</script>
	<script type="application/javascript">window.jQuery || document.write('<script src="../jquery.min.js">\x3C/script>')</script>
	<!-- ================================================== -->
	<!-- jQuery document ready method -->
	<script>
		$(document).ready(function(){
		});
	</script>
	<!-- ================================================== -->
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<!-- ================================================== -->
	<title>jQuery 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>
	/******** PHONE OR SMALLER ****************************/
	* {/INCLUDE BORDER AND PADDING WITHIN HEIGHT AND WIDTH/
	box-sizing: border-box;
	}
	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;
	}
	body {
	background-color: yellow;
	}
	/******** TABLET **************************************/
	@media screen and (min-width: 769px) {
	body {
	background-color: green;
	}
	}
	/******** LAPTOP **************************************/
	@media screen and (min-width: 992px) {
	body {
	background-color: red;
	}
	}
	/******** DESKTOP OR BIGGER ***************************/
	@media screen and (min-width: 1200px) {
	body {
	background-color: violet;
	}
	}
	</style>
	</head>
	<body>



	</body>
	<!-- ================================================== -->
	<!-- JavaScript at bottom for faster page loading. -->
	<!-- ================================================== -->
	<!-- 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]-->
	<!-- ================================================== -->
	<!-- jQuery library: -->
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js"></script>
	<script type="application/javascript">window.jQuery \|\| document.write('<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">\x3C/script>')</script>
	<script type="application/javascript">window.jQuery \|\| document.write('<script src="../jquery.min.js">\x3C/script>')</script>
	<!-- ================================================== -->
	<!-- jQuery document ready method -->
	<script>
	$(document).ready(function(){
	});
	</script>
	<!-- ================================================== -->
	</html>