Ein paar Anforderungen tauchen im Zusammenhang damit, dass eine Website ihre Inhalte und ihr Design auf allem möglichen Gerätegrößen perfekt zum Ausdruck bringen muss, immer wieder auf: zum Beispiel off-canvas Menüs und unterschiedliche Klickevents je nach Endgerät.

Oft (meist) kommt man allein mit Media Queries nicht ans Ziel. Dennoch sind diese natürlich in unserem Zusammenhang das wichtigste:

@media only screen and (min-width: 768px) {
  ...
}

Hamburger Button mit HTML und CSS

Möchte man weder eine Grafik noch einen Font für den Hamburger verwenden, kann man sich bei Bootstrap inspirieren lassen. Sieht im wesentlichen so aus:

<button type="button">
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>

#main_nav button {
  position: relative;
  float: right;
  padding: 9px 10px;
  margin-top: 8px;
  margin-right: 15px;
  margin-bottom: 8px;
  background-color: transparent;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  display: none;
}
 
#main_nav .icon-bar {
  display: block;
  width: 26px;
  height: 3px;
  border-radius: 1px;
  background-color: #ffffff;
  margin-bottom: 6px;
}

Off Canvas Menü mit CSS und jQuery

Das seitliche „Reinschieben“ von Inhalten, zum Beispiel einem Menü, ist als „off canvas“ bekannt. Man könnte dafür die animate Funktion von jQuery verwenden, zum Beispiel so (hier wird aus Gründen der einfacheren Darstellung nicht das Menü „reingeschoben“, sondern der Hauptbereich nach rechts verschoben):

$('a.button').click(function(event){
  event.preventDefault();
  $('#all').animate({left:'280px'}, 300); 
});

Das Element, das verschoben wird, hätte minimal dieses dieses CSS:

#all {
  position:relative;
  left:0;
}

Das funktioniert, ist aber aus unterschiedlichen Gründen unschön. Besser ist eine Lösung, die CSS Animationen verwendet und jQuery lediglich dazu verwendet, einem Element eine entsprechend konfigurierte Klasse zuzuweisen. Das CSS:

#all {
  position:relative;
  z-index:250;
  left:0px;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}
#all.offcanvas {
  -webkit-transform: translate(280px, 0px);
  -o-transform: translate(280px, 0px);
  transform: translate(280px, 0px);
}

Im Element, das verschoben werden soll, wird die Art und Weise der Animation hinterlegt:
transition: all .3s ease;
In der zugewiesenen Klasse wird angegeben, wie weit und in welche Richtung geschoben wird, in diesem Fall um 280px nach rechts und 0px nach oben oder unten. Will man nach links verschieben, bekommt der Wert für das transform den Wert translate(-280px, 0px).
Im jQuery wird dann dem Element beim Klick Event die Klasse zugewiesen:

$('a.button').click(function(event){
  event.preventDefault();
  $('#all').addClass('offcanvas‘);
}

Die jQuery on() Funktion zum Ansprechen von dynamisch eingefügten Klassen

Die früher als live() bekannte Funktion, die es ermöglicht, dynamisch vergebene Klassen bei bestimmten Elementen anzusprechen, wurde bereits seit Version 1.7 ersetzt durch die on() Funktion. Am zuverlässigsten funktioniert das dann folgendermaßen:

$(document).on('click','#all.offcanvas a',function(){
  $('#all').removeClass('offcanvas');
})

statt so:

$('#all.offcanvas a').on('click',function(event){
  event.preventDefault();
  $('#all').removeClass('offcanvas');
})

Eine Klasse hinzufügen, je nach Fenstergröße

Es kann nötig werden, einem Element eine Klasse hinzuzufügen je nach Fenstergröße. Um das auch zu erreichen, wenn sich die Fenstergröße ändert, z.B. durch das Drehen eines touch devices, werden die Eventhandler load und resize verwendet.

$(window).on('load resize', function() {
var width = $(window).width();
  if (width <= 767) {
    $('a.imagelink').addClass('mobilelink');
  } else {
    $('a.imagelink').removeClass('mobilelink');
  }
});

Abfragen, ob es sich um ein touch device handelt und das hover- durch ein click-Event ersetzen

var is_touch_device = 'ontouchstart' in document.documentElement;  
if(is_touch_device) {  
  $('a').on('click', function (event) {
    var link = $(this);
    if (link.hasClass('hover')) {
        return true;
    } else {
        link.addClass('hover');
        $('a').not(this).removeClass('hover');
        event.preventDefault();
        return false;
    }
});

Links:
https://coderwall.com/p/ucjphq/bind-load-and-resize-for-responsive-jquery
http://www.hnldesign.nl/work/code/mouseover-hover-on-touch-devices-using-jquery