Meta tag @media in css for responsive websites

To make the websites responsive, we use the meta tags which makes our website look more responsive when used in smart phones or ipads.

Using meta tag and @media in css for making website more responsive when used in small screen devices.

Link to JS FIDDLE:

//jsfiddle.net/djmayank/a2tn43yw/26/embedded/html,css,result/dark/

CSS:

.nav {
 background-color: black;
 display:box;
 overflow: hidden;
}

a {
 float:left; 
 display: block;
 color: white;
 text-align: center;
 padding: 10px 16px;
 text-decoration: none;
}

a:hover {
 background-color: #ddd;
 color: #000;
}

@media screen and (max-width:600px) {
 a {
 float:none;
 width:100%;
 }
}

The making of float:none make the navigation bar to move one above the other like in stack, thus making website responsive and a classy look.