Responsive Stats Card

用于统计的卡片

by Ritchie Zhu

HTML

<div class="content-panel card card-event">
  <div class="card__stats">
    <span class="card__stats-number">876</span>
    <span class="card__stats-label">报名</span>
  </div>
  <div class="card__stats">
    <span class="card__stats-number">27657</span>
    <span class="card__stats-label">访问</span>
  </div>
  <div class="card__stats">
    <span class="card__stats-number">2763</span>
    <span class="card__stats-label">投票</span>
  </div>
</div>

CSS

html {
  -webkit-text-size-adjust: 100%;
  font-size: 50px;	/* 320 / 640 * 100 */
}
@media screen and (min-width: 360px){
  html{
    font-size: 56.25px;		/* 360 / 640 * 100 */
  }
}
@media screen and (min-width: 375px) {
  html{
    font-size: 58px;
  }
}
@media screen and (min-width: 384px){
  html{
    font-size: 60px;
  }
}
@media screen and (min-width: 400px){
  html{
    font-size: 62.5px;
  }
}
@media screen and (min-width: 414px) {
  html{
    font-size: 64.6875px;
  }
}
@media screen and (min-width: 480px) {
  html{
    font-size: 75px;
  }
}
@media screen and (min-width: 640px) {
  html{
    font-size: 100px;
  }
}
@media screen and (min-width: 768px){
  html{
    font-size: 120px;
  }
}

.content-panel {
  margin: .16rem .1rem;
  background: #fff;
  border-radius: .08rem;
  box-shadow: 0 0 .13rem rgba(0,0,0,0.05);
  box-sizing: border-box;
  padding: 0 .16rem;
}

.content-panel.card {
  display: flex;
  flex-direction: row;
  padding: 0.16rem 0;
}

.card__stats {
  flex: 1;
  text-align: center;
}

.card__stats + .card__stats {
  border-left: 1px solid #ddd;
}

.card__stats-number {
  display: block;
  font-size: 0.32rem;
  color: #333;
}

.card__stats-label {
  display: block;
  margin-top: 0.05rem;
  font-size: 0.28rem;
  color: #aaa;
}