CSS媒体查询 @media 设计响应式的页面

//在屏幕宽度小于等于768px时
@media only screen and (max-width: 768px) {
  .nav-bar {
    width: calc(100% - 20px);
    padding: 0 10px;
    height: 60px;
  }
}
//在屏幕宽度大于768px时
@media only screen and (min-width: 769px) {
  .nav-bar {
    width: calc(100% - 40px);
    padding: 0 20px;
    height: 80px;
  }
}

通过在@media only screen and (max-width: 768px)与@media only screen and (min-width: 769px)实现对同一个HTML元素在屏幕宽度不同的情况下具有不同的样式。