微信登录

其他属性 - @media (){} - 窗口适应

作用：窗口大小决定css样式

方式1

  1.  /*手机*/
  2. @media (max-width: 768px)
  3. {
  4.     .media1{
  5.         width:400px;
  6.     }
  7. }
  9.  /*平板*/
  10. @media (min-width: 768px) and (max-width: 979px)
  11. {
  12.     .media1{
  13.         width:400px;
  14.     }
  15. }
  17.  /*PC*/
  18. @media (min-width: 979px)
  19. {
  20.     .media1{
  21.         width:400px;
  22.     }
  23. }

方式2

  1. <style>
  3.  /*手机*/
  4.  @media screen and (max-width:600px){
  5.      .box_2 {
  6.          padding-top: 45px;
  7.      }
  8.  }
  9.  /*平板*/
  10.  @media screen and (min-width:600px) and (max-width:960px){
  11.      .box_2 {
  12.          padding-top: 45px;
  13.      }
  14.  }
  15.  /*PC*/
  16.  @media screen and (min-width:960px){
  17.      .box_2 {
  18.          padding-top: 45px;
  19.      }
  20.  }
  22.     </style>