html 断点视觉反馈

Posted 2021-05-11

.ruler {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2rem;
  background-color: #F44336;
}

@media (max-width: 1600px) {
  .ruler {
    background-color: #FF9800;
  }
}

@media (max-width: 1280px) {
  .ruler {
    background-color: #FFEB3B;
  }
}

@media (max-width: 1025px) {
  .ruler {
    background-color: #4CAF50;
  }
}

@media (max-width: 700px) {
  .ruler {
    background-color: #03A9F4;
  }
}

<div class="ruler"></div>