title: Web design - zoom level changes website layout
body: <p>What do I need to do, in terms of HTML/CSS, to design a webpage similar to <a href="https://www.google.com/atap/projecttango/" rel="nofollow">Project Tango</a> and <a href="http://www.relevantmagazine.com/" rel="nofollow">Relevant Magazine</a> </p>
  
  <ol>
  <li>Whereby when I zoom in(through a desktop browser) to about 200%, the layout of the website changes and the whole navigation bar on top changes into that 3 parallel line thing. </li>
  <li>The website content also automatically adjusts to not go beyond the
  horizontal view and hence, no need for horizontal scrolling. </li>
  <li>This website layout adjusts automatically when I browse those pages via
  my Android browser. </li>
  </ol>
  
  <p>How do I achieve this?</p>
  
  <p>Sorry if something similar has been asked/posted up, but I honestly don't know how to describe it to be able to find it. Tried Googling with all possible terms I could think of(from zoom level to HTMLL5 &amp; CSS3) to describe it but nothing came up. </p>
  
  <p>Thanks!</p>