媒体查询适配使用

@media screen and (min-width: 最小像素,闭区间) and (max-width: 最大像素开区间) {
  .div样式标签名 {
      //该屏幕处在像素对应要展示的样式
    font-size: 17px;
  }
}

例子:

@media screen and (min-width: 1000px) and (max-width: 1200px) {
  .logo-text-ui {
    font-size: 17px;
    top: 24% !important;
    letter-spacing: 2px;
  }
}
@media screen and (min-width: 1280px) and (max-width: 1360px) {
  .logo-text-ui {
    // 150%缩放 对应1280px
    font-size: 23px;
    top: 24% !important;
    letter-spacing: 2px;
  }
}
@media screen and (min-width: 1360px) and (max-width: 1366px) {
  .logo-text-ui {
    font-size: 24px;
    top: 18% !important;
    letter-spacing: 2px;
  }
}
@media screen and (min-width: 1366px) and (max-width: 1400px) {
  .logo-text-ui {
    font-size: 24px;
    top: 18% !important;
    letter-spacing: 2px;
  }
}
@media screen and (min-width: 1400px) and (max-width: 1440px) {
  .logo-text-ui {
    font-size: 26px;
    top: 24% !important;
    letter-spacing: 2px;
  }
}
 
@media screen and (min-width: 1440px) and (max-width: 1600px) {
  .logo-text-ui {
    // 125%缩放 对应1536px
    font-size: 26px;
    top: 10% !important;
    letter-spacing: 1px;
  }
}
@media screen and (min-width: 1600px) and (max-width: 1680px) {
  .logo-text-ui {
    font-size: 29px;
    top: 15% !important;
    letter-spacing: 2px;
  }
}
@media screen and (min-width: 1680px) and (max-width: 1920px) {
  .logo-text-ui {
    font-size: 32px;
    top: 7% !important;
    letter-spacing: 1px;
  }
}
 
@media screen and (min-width: 1920px) {
  .logo-text-ui {
    // 100%缩放 对应1920px
    font-size: 36px;
    top: 10% !important;
    letter-spacing: 2px;
  }
}

你可能感兴趣的:(媒体,前端,javascript)