Dead Simple Flexbox Nav(响应式navbar)

dead-simple-flexbox-nav-starter.markdown

Dead Simple Flexbox Nav STARTER

A Pen by liuxiaomingskm on CodePen.

License.

index.html

<nav>
  <a href=""><i class="fa fa-home"></i>Home</a>
  <a href=""><i class="fa fa-question"></i>About</a>
  <a href=""><i class="fa fa-phone"></i>Contact</a>
  <a href=""><i class="fa fa-paw"></i>Dogs</a>
</nav>

style.css

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
@import url('https://fonts.googleapis.com/css?family=Raleway:200');

nav {
  display: flex;
  flex-direction:row;
  justify-content:flex-end;
}

a {
  font-size:40px;
  margin:20px;
  text-decoration:none;
  color:#95a5a6;
  font-family: raleway;
  border-bottom: 1px solid #52c9aa;
  transition: color 3.55s ease-out;
   
}
a:hover {
  color:#3498db;
  border-bottom-color:#3498db;
}

i{
  margin-right:10px;
}
@media screen and (max-width:920px){
  nav {
    justify-content: space-around;
  }
  a {
    font-size:26px;
  }
}
@media screen and (max-width: 600px){
  nav{
    display:flex;
    flex-direction:column;
    align-items: center;
    background: #34495e;
  } 
  a{
    color:white;
  }
}

练习了响应式网页的做法 特别是@media screen and 的用法~