Как делать адаптивный шаблон?

 function menu() { 
   $('.menu').toggleClass('visible'); 
 }

.menu-hamburger { 
  display: none; 
} 
.visible { 
  display: block !important; 
} 
@media screen and (max-width: 769px) { 
  .menu { 
    display: none; 
  } 
  .menu-hamburger { 
    display: block; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
  } 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="menu"> 
  <ul> 
    <li>menu1</li> 
    <li>menu2</li> 
    <li>menu3</li> 
    <li>menu4</li> 
    <li>menu5</li> 
  </ul> 
</div> 
<button class="menu-hamburger" onclick="menu()"> 
  x 
</button>