A basic responsive web page, following the ideas presented in Learning Responsive Web Design by Clarissa Peterson, with additional JavaScript to output the current window size as well as the size of various HTML elements in the page.
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>a responsive page + js</title> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <!-- styles: should have reset.css first --> | |
| <link rel="stylesheet" href= "reset.css"> | |
| <link rel="stylesheet" href= "main.css"> | |
| </head> | |
| <body> | |
| <div id="fullpage"> | |
| <header role="banner" id="header"> | |
| <h1>header</h1> | |
| <div id="window_info"></div> | |
| <div id="header_info"></div> | |
| </header> | |
| <article id="article_1"> | |
| <h1>article</h1> | |
| <div id="article_info"></div> | |
| </article> | |
| <aside role="complementary" id="aside_1"> | |
| <h1>aside</h1> | |
| <div id="aside_info"></div> | |
| </aside> | |
| <footer role="contentinfo" id="footer"> | |
| <h1>footer</h1> | |
| <div id="footer_info"></div> | |
| </footer> | |
| </div> <!-- end fullpage --> | |
| <!-- javascript links --> | |
| <script src="main.js"></script> | |
| </body> | |
| </html> |
| /* Main Content ----------------------------- */ | |
| header, article, aside, footer, ul, li, p { | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| #fullpage { | |
| max-width: 62em; | |
| margin: auto; | |
| } | |
| header, article, aside, footer { | |
| padding: 10px 1em; | |
| margin: 0 5% 10px; | |
| border:1px solid #111; | |
| background-color: lightgrey; | |
| } | |
| header { | |
| margin-top: 10px; | |
| } | |
| article { | |
| min-height: 10em; | |
| } | |
| aside { | |
| min-height: 5em; | |
| } | |
| h1 { | |
| font-size: 2em; | |
| } | |
| h2 { | |
| font-size: 1.5em; | |
| } | |
| h1, h2 { | |
| font-weight: bold; | |
| margin: 5px 0; | |
| } | |
| p { | |
| font-size: 1em; | |
| margin: 5px 0; | |
| } | |
| ul { | |
| padding-left: 10px; | |
| margin: 10px 0; | |
| list-style-type: none; | |
| } | |
| li { | |
| margin-left: 10px; | |
| padding-left: 10px; | |
| } | |
| strong { | |
| font-weight: bold; | |
| } | |
| /* Media ---------------------------------------*/ | |
| @media only screen and (min-width: 38em) { | |
| article { | |
| width: 67%; | |
| float: left; | |
| margin-right: 0; | |
| } | |
| aside { | |
| width: 21%; | |
| float: right; | |
| margin-left: 0; | |
| } | |
| footer { | |
| clear: both; | |
| } | |
| } |
| window.onload = function () { | |
| write_window_dimensions(); | |
| write_dimensions("header", "header_info"); | |
| write_dimensions("article_1", "article_info"); | |
| write_dimensions("aside_1", "aside_info"); | |
| write_dimensions("footer", "footer_info"); | |
| } | |
| function write_dimensions(div_id, output_id) { | |
| var div = document.getElementById(div_id); | |
| var div_info = document.getElementById(output_id); | |
| var w = Math.round(div.getBoundingClientRect().width * 100)/100; | |
| var h = Math.round(div.getBoundingClientRect().height * 100)/100; | |
| if (w > 400) { | |
| div_info.innerHTML = "<p>" + div_id + "-- " + " width: " + w + | |
| " height: " + h + "</p>"; | |
| } else { | |
| div_info.innerHTML = "<p>" + div_id + "--<br>" + " width: " + w + | |
| "<br>height: " + h + "</p>"; | |
| } | |
| } | |
| function write_window_dimensions() { | |
| var header_info = document.getElementById("window_info"); | |
| var width = window.innerWidth; | |
| var height = window.innerHeight; | |
| if (width > 445) { | |
| header_info.innerHTML = "<p>window-- width: " + width + | |
| " height: " + height + "</p>"; | |
| } else { | |
| header_info.innerHTML = "<p>window--<br>width: " + width + | |
| "<br>height: " + height + "</p>"; | |
| } | |
| } | |
| window.addEventListener('resize', function() { | |
| write_window_dimensions(); | |
| write_dimensions("header", "header_info"); | |
| write_dimensions("article_1", "article_info"); | |
| write_dimensions("aside_1", "aside_info"); | |
| write_dimensions("footer", "footer_info"); | |
| }); |
| /* http://meyerweb.com/eric/tools/css/reset/ | |
| v2.0 | 20110126 | |
| License: none (public domain) | |
| */ | |
| html, body, div, span, applet, object, iframe, | |
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |
| a, abbr, acronym, address, big, cite, code, | |
| del, dfn, em, img, ins, kbd, q, s, samp, | |
| small, strike, strong, sub, sup, tt, var, | |
| b, u, i, center, | |
| dl, dt, dd, ol, ul, li, | |
| fieldset, form, label, legend, | |
| table, caption, tbody, tfoot, thead, tr, th, td, | |
| article, aside, canvas, details, embed, | |
| figure, figcaption, footer, header, hgroup, | |
| menu, nav, output, ruby, section, summary, | |
| time, mark, audio, video { | |
| margin: 0; | |
| padding: 0; | |
| border: 0; | |
| font-size: 100%; | |
| font: inherit; | |
| vertical-align: baseline; | |
| } | |
| /* HTML5 display-role reset for older browsers */ | |
| article, aside, details, figcaption, figure, | |
| footer, header, hgroup, menu, nav, section { | |
| display: block; | |
| } | |
| body { | |
| line-height: 1; | |
| } | |
| ol, ul { | |
| list-style: none; | |
| } | |
| blockquote, q { | |
| quotes: none; | |
| } | |
| blockquote:before, blockquote:after, | |
| q:before, q:after { | |
| content: ''; | |
| content: none; | |
| } | |
| table { | |
| border-collapse: collapse; | |
| border-spacing: 0; | |
| } |