css 响应式增强http://24ways.org/2014/responsive-enhancement/ Jump-to-footer模式将内容放在首位，导航secon
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css 响应式增强http://24ways.org/2014/responsive-enhancement/ Jump-to-footer模式将内容放在首位，导航secon相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>12 Days of Christmas</title>
<link rel="stylesheet" href="enhanced.css">
</head>
<body>
<main role="main" id="top">
<a href="#menu" class="control">Menu</a>
<h1>A Partridge in a Pear Tree</h1>
<p>
Gold Christmas yule wintertime noel love eggnog love. Icicle celebration celebration jingle bells, december partridge cookie ivy carols december wreath noel. Angel eggnog holiday candy cane cookie lights fireplace frosty, singing toys decorate decorate.
</p>
<p>
Decorate holiday wintertime nutcracker holiday elves gold frosty gold toys, gold ornament reindeer fireplace. Holiday elves chimney chimney tree celebrate december eggnog. Give wintertime love, yule gift chestnuts angel guest carols carols fireplace noel tree singing. Angel santa december icicle frosty celebrate celebration calendar, Christmas tree decorate holiday. Holiday chestnuts tree partridge elves love yule.
</p>
<p>
Fireplace gift scarf love elves ivy ornament. Ivy angel fireplace, yule angel Christmas celebration ivy jingle bells holiday ivy elves ornament. Lights holiday yule, Christmas angel scarf carols holiday celebration gift. Holly nutcracker singing noel give cookie chimney noel, reindeer angel elves carols love. Nutcracker ornament decorate eggnog partridge singing guest. Holiday lights chestnuts icicle ivy wreath calendar. Love celebration december celebrate give wreath angel celebration ivy. Eggnog holiday stocking december singing, eggnog chestnuts gift toys celebration. Guest wreath santa toys, singing ornament holiday elves frosty holiday yule gold gift.
</p>
</main>
<nav role="navigation" id="menu">
<h2>My true love gave to me…</h2>
<ol reversed>
<li><a href="#">Drummers Drumming</a></li>
<li><a href="#">Pipers Piping</a></li>
<li><a href="#">Lords-a-Leaping</a></li>
<li><a href="#">Ladies Dancing</a></li>
<li><a href="#">Maids-a-Milking</a></li>
<li><a href="#">Swans-a-Swimming</a></li>
<li><a href="#">Geese-a-laying</a></li>
<li><a href="#">Gold Rings</a></li>
<li><a href="#">Calling Birds</a></li>
<li><a href="#">French Hens</a></li>
<li><a href="#">Turtle Doves</a></li>
<li><mark>Partridge in a Pear Tree</mark></li>
</ol>
<a href="#top" class="control">Dismiss</a>
</nav>
<script src="offcanvas.js"></script>
</body>
</html>(function (win, doc) {
'use strict';
if (!win.addEventListener) {
return;
}
var linkclass = 'control',
activeclass = 'active',
enhanceclass = 'cutsthemustard',
toggleClassName = function (element, toggleClass) {
var reg = new RegExp('(\\s|^)' + toggleClass + '(\\s|$)');
if (!element.className.match(reg)) {
element.className += ' ' + toggleClass;
} else {
element.className = element.className.replace(reg, '');
}
},
navListener = function (ev) {
ev = ev || win.event;
var target = ev.target || ev.srcElement;
if (target.className.indexOf(linkclass) !== -1) {
ev.preventDefault();
toggleClassName(doc.body, activeclass);
}
};
doc.documentElement.className += ' ' + enhanceclass;
doc.addEventListener('click', navListener, false);
}(this, this.document));html {
background: black;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
background: white;
color: black;
font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
font-size: 100%;
line-height: 1.5;
}
a {
font-weight: bold;
text-decoration: none;
}
a:link,
a:visited {
color: #369;
}
a:hover,
a:focus,
a:active {
color: #69c;
text-decoration: underline;
}
h1, h2, h3,
ol, ul, p {
margin-top: 0;
margin-bottom: 1.5rem;
max-width: 45em;
}
li {
margin-top: 0;
margin-bottom: 1rem;
}
.control {
display: inline-block;
float: right;
border: 1px solid;
border-radius: 0.25em;
padding: 0.25em 0.5em;
}
[role="main"],
[role="navigation"] {
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: block;
width: 100%;
min-height: 100%;
padding: 1em 5% 3em;
}
[role="main"] {
background: white;
color: black;
}
[role="navigation"] {
background: black;
color: white;
}
@media all and (min-width: 35em) {
.control {
display: none;
}
body {
display: table;
}
[role="navigation"] {
display: table-caption;
min-height: 0;
-webkit-columns: 6 15em;
-moz-columns: 6 15em;
columns: 6 15em;
}
[role="navigation"] h2 {
-webkit-column-span: all;
-moz-column-span: all;
column-span: all;
}
}
@media all and (max-width: 35em) {
.cutsthemustard [role="main"] {
-webkit-transition: all .25s;
transition: all .25s;
width: 100%;
position: absolute;
z-index: 2;
top: 0;
right: 0;
}
.cutsthemustard [role="navigation"] {
width: 75%;
position: absolute;
z-index: 1;
top: 0;
right: 0;
}
.cutsthemustard .active [role="main"] {
-webkit-transform: translateX(-75%);
-ms-transform: translateX(-75%);
transform: translateX(-75%);
}
}以上是关于css 响应式增强http://24ways.org/2014/responsive-enhancement/ Jump-to-footer模式将内容放在首位，导航secon的主要内容，如果未能解决你的问题，请参考以下文章