天天看点

vue中使用媒体查询

@media screen and (min-width: 1680px) and (max-width: 1920px){
    .everyDayRate {
      margin-left: 14%;
    }
  }
  @media screen and (min-width: 1600px) and (max-width: 1680px){
    .everyDayRate {
      margin-left: 12%;
    }
  }
  @media screen and (min-width: 1440px) and (max-width: 1600px){
    .everyDayRate {
      margin-left: 12%;
    }
  }
  @media screen and (min-width: 1400px) and (max-width: 1440px){
    .everyDayRate {
      margin-left: 10%;
    }
  }
  @media screen and (min-width: 1366px) and (max-width: 1400px){
    .everyDayRate {
      margin-left: 8%;
    }
  }
  @media screen and (min-width: 1280px) and (max-width: 1366px){
    .everyDayRate {
      margin-left: 7%;
    }
  }
           

效果:

在1680px-1920px中:

vue中使用媒体查询

在1280px-1366px中:

vue中使用媒体查询

希望喜欢和合适撞个满怀。

继续阅读