vmin和vw

Posted on

vw/vh 和 vmin/vmax

vmin 可以照顾手机端 横屏和竖屏 的显示效果

vw/vh

vh 和 vw 与视口的宽度和高度有关
1vw 就是视口宽度的 1%

vmin/vmax

vmin 和 vmax 是与当下屏幕的宽度和高度的最大值或最小值有关，
取决于哪个更大和更小。

1
2
3
4
app {
  /* width: 100vw; */
  width: 100vmin;
}
  • vim: 当前 vw 和 vh 中较小的一个值(即相对于视窗中较短的一边)
  • vmax: 当前 vw 和 vh 中较大的一个值(即相对于视窗中较长的一边)