案例收集

字体横竖屏适配参考

代码来自up主开源项目：snakeball

/* 响应式 */
/* vmin */
@media screen and (max-aspect-ratio: 1.7/1) {
  * {
    font-size: 0.96vmin;
  }
}
@media screen and (max-aspect-ratio: 1.6/1) {
  * {
    font-size: 0.9vmin;
  }
}
@media screen and (max-aspect-ratio: 1.5/1) {
  * {
    font-size: 0.84vmin;
  }
}
@media screen and (max-aspect-ratio: 1.4/1) {
  * {
    font-size: 0.78vmin;
  }
}
@media screen and (max-aspect-ratio: 1.3/1) {
  * {
    font-size: 0.72vmin;
  }
}
@media screen and (max-aspect-ratio: 1.2/1) {
  * {
    font-size: 0.66vmin;
  }
}
@media screen and (max-aspect-ratio: 1.1/1) {
  * {
    font-size: 0.6vmin;
  }
}
/* vmax */
@media screen and (max-aspect-ratio: 1/1) {
  * {
    font-size: 0.6vmax;
  }
}
@media screen and (max-aspect-ratio: 0.8/1) {
  * {
    font-size: 0.52vmax;
  }
}
@media screen and (max-aspect-ratio: 0.6/1) {
  * {
    font-size: 0.44vmax;
  }
}
@media screen and (max-aspect-ratio: 0.5/1) {
  * {
    font-size: 0.4vmax;
  }
}

这里采用font-size后，元素单位均使用rem配合clac()进行动态调整，这个就可以将整体所有元素的大小都进行响应式管理