css之vm_vh_lvm_lvh的差别:

大部分前端都知道，在 CSS 世界中，有 vw、vh、vmax、vmin 这几个与视口 Viewport 相关的单位。
正常而言：
  
1vw 等于1/100的视口宽度 （Viewport Width）
1vh 等于1/100的视口高度 （Viewport Height）
vmin — vmin 的值是当前 vw 和 vh 中较小的值
vmax — vw 和 vh 中较大的值
  
但是，在移动端，情况就不太一样了。100vh 不总是等于一屏幕的高度。有的时候，100vh 高度会出现滚动条。
根因在于：
很多浏览器，在计算 100vh 的高度的时候，会把地址栏等相关控件的高度计算在内2
同时，很多时候，由于会弹出软键盘等操作，在弹出的过程中，100vh 的计算值并不会实时发生变化！
  
新视口相关单位之 lvh、svh、dvh
为了解决上述的问题，规范新推出了三类单位，分别是：

The large viewport units（大视口单位）：lvw,lvh, lvi, lvb, lvmin, and lvmax
The small viewport units（小视口单位）：svw, svh, svi, svb, svmin, and svmax
The dynamic viewport units（动态视口单位）：dvw, dvh, dvi, dvb, dvmin, and dvmax
别看看上去很多，其实很好记忆，vw/vw/vmax/vmin 的前缀是 v，而：
  
大视口单位的前缀是 lv，意为 large viewport
小视口单位的前缀是 sv，意为 small viewport
动态视口单位的前缀是 dv，意为 dynamic viewport
这里我们着重关注 lvh、svh、dvh。它们三者与 vh 有什么异同呢？
  
先来看大视口与小视口，规范对它们的定义是：
Large Viewport: The viewport sized assuming any UA interfaces that are dynamically expanded and retracted to be retracted.
Small Viewport: The viewport sized assuming any UA interfaces that are dynamically expanded and retracted to be expanded.
翻译一下：
  
大视口（Large Viewport）：视口大小假设任何动态扩展和缩回的 UA 界面都没有展开
小视口（Small Viewport）：视口大小假设任何动态扩展和缩回的 UA 界面都展开了
  
参考链接:https://www.cnblogs.com/coco1s/p/17078218.html