Cacher is the code snippet organizer for pro developers

<h1>Resize Window</h1> 
  <div class="container">   
    <div class="device">     
      <div class="frame">       
        <div class="screen">
        </div>     
      </div>   
    </div> 
  </div>

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #64beaa;
}
h1 {
  font-size: 1.2em;
  letter-spacing: 0.1em;
  font-weight: 100;
  padding: 1em;
  color: #fff;
  text-align: center;
  font-family: sans-serif;
}
.container {
  text-align: center;
}
.container,
.device,
.frame,
.screen {
  -webkit-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
/* Mobile */
.device {
  display: inline-block;
  margin: 0 auto;
}
.frame {
  border-radius: 25px;
  padding: 50px 2px;
  background: #ddd;
  box-shadow: 0 0 0 1px #ccc;
}
.screen {
  position: relative;
  height: 300px;
  width: 200px;
  background: #444;
  box-shadow: inset 0 0 0 1px #333;
}
.screen:before,
.screen:after {
  position: absolute;
  width: 32px;
  left: 50%;
  margin-left: -16px;
  border-radius: 16px;
  content: " ";
  background: #bbb;
  box-shadow: 0 0 0 1px #eee;
}
.screen:before {
  height: 8px;
  top: -29px;
}
.screen:after {
  height: 32px;
  bottom: -41px;
}
/* Tablet */
@media all and (min-width: 600px) {
  .screen {
    height: 440px;
    width: 360px;
  }
  .screen:before {
    width: 10px;
    height: 10px;
    top: -30px;
    margin-left: -5px;
  }
}
/* Desktop */
@media all and (min-width: 960px) {
  .frame {
    padding: 30px 2px 2px;
    border-radius: 10px;
  }
  .screen {
    height: 510px;
    width: 900px;
    border-radius: 0 0 10px 10px;
  }
  .screen:before {
    width: 10px;
    height: 10px;
    top: -20px;
    left: 15px;
    background: #ff6464;
    box-shadow: 15px 0 #64ff64, 30px 0 #ffff64;
  }
  .screen:after {
    width: 90%;
    height: 16px;
    top: -23px;
    left: 10%;
    border-radius: 5px;
    background: #eee;
  }
}