Skip to content

Instantly share code, notes, and snippets.

@Ellyria

Ellyria/jQuery Skeleton - Responsive.html

Last active June 14, 2020 13:40
Show Gist options
  • Save Ellyria/003118d4546c39963e1a15863c5a915c to your computer and use it in GitHub Desktop.
Save Ellyria/003118d4546c39963e1a15863c5a915c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment