页面响应式样式设计操作

1. css 样式

如果满足  media="screen and (max-width: 768px)"  这个条件的话

  <link rel="stylesheet" media="screen and (max-width: 768px)" href="css/mobile.css">

#what .items {
  display: block;
}
#what .items .item {
  display: flex;
  text-align: center;
}
#what .items .item i {
  margin-bottom: 1.3rem;
  align-self: center;
  margin-bottom: 0;
}
/* samrtphones */
@media (max-width:500px) {
  #navbar {
    flex-direction: column;
    align-items: center;
  }
  #navber .logo {
      margin-bottom: 0.5rem;
      text-align: center;
  }
  #navbar ul {
    padding: 0.5rem;
  }
  #who {
    display: block;
  }
  #who .who-img {
    height: 300px;
  }
  #clients .items img {
    width: 80%;
  }
  #clients .items div:lase-child{
    display: none;
  }
  #contact .contact-img {
    display: none;
  }
}

/* iphone5 */
@media (max-height: 568px) {
  .l-header {
    font-size: 3rem;
  }
  .lend {
    font-size: 1rem
  }
}

如果满足  media="screen and(min-width: 1100px)"  这个条件的话

  <link rel="stylesheet" media="screen and(min-width: 1100px)" href="css/widescreen.css">

#what .items {
  display: block;
}
#what .items .item {
  display: flex;
  text-align: center;
}
#what .items .item i {
  margin-bottom: 1.3rem;
  align-self: center;
  margin-bottom: 0;
}
/* samrtphones */
@media (max-width:500px) {
  #navbar {
    flex-direction: column;
    align-items: center;
  }
  #navber .logo {
      margin-bottom: 0.5rem;
      text-align: center;
  }
  #navbar ul {
    padding: 0.5rem;
  }
  #who {
    display: block;
  }
  #who .who-img {
    height: 300px;
  }
  #clients .items img {
    width: 80%;
  }
  #clients .items div:lase-child{
    display: none;
  }
  #contact .contact-img {
    display: none;
  }
}

/* iphone5 */
@media (max-height: 568px) {
  .l-header {
    font-size: 3rem;
  }
  .lend {
    font-size: 1rem
  }
}