#mediatest1{
  padding: 50px;
  background: gray;
}

#mediatest2{
  padding: 50px;
  background: gray;
}

#boxsizing1{
  width: 500px;
  height: 300px;
  border: 1px solid blue;
  margin: 0 auto;
}

#boxsizing2{
  width: 500px;
  height: 300px;
  padding: 50px;
  border: 1px solid red;
  margin: 0 auto;
}

.bb{
  box-sizing: border-box;
}


@media screen and (min-width: 640px) {
    #mediatest1 { background-color: lightgreen; }
    #mediatest2 { font-size: 1.2em; }
}
@media screen and (min-width: 960px) {
    #mediatest1 { background-color: yellow; }
    #mediatest2 { font-size: 1.5em; }
}
@media screen and (min-width: 1280px) {
    #mediatest1 { background-color: orange; }
    #mediatest2 { font-size: 2em; }
}
@media screen and (min-width: 1440px) {
    #mediatest1 { background-color: red; }
    #mediatest2 { font-size: 2.5em; }
}