刚刚入行前端开发一年，经验欠缺，在新公司独立承担一个生产管理系统的前端开发工作。该系统操作页面均为全屏，页面固定但使用机器有所不同，且用户在使用时不保证能记得按F11（手动捂脸），因此希望适应全屏和不同分辨率以达成最好的显示效果。
初版使用固定式布局，完成后现场测试效果一般，后改为使用%百分比的方式，勉强解决了问题，但仍不是最佳效果。
查阅资料后，发现了vw和vh这两个单位，终于较为完善的解决了这一问题，遂记录这两个单位的使用方法，以备后用。
兼容性
图片源自CSS属性可用性查询网站caniuse。
用法
vw:是相对于视窗宽度的单位，100vw为浏览器视窗的总宽度，也即相对于html的width:100%。
vh:是相对于视窗高度的单位，100vh为浏览器视窗的总高度，也即相对于html的height:100%。
注意：此处的宽高指的是可视区域，即window.innerWidth/window.innerHeight大小，不包含任务栏、标题栏以及底部工具栏的浏览器区域大小。
使用场景
在之前的资料查阅中，一直未发现这两个单位的原因在于：
- 之前这两个单位仍不算是完美兼容，介绍的帖子较少；
- 一般很少有y方向不向下延伸的页面，因此y方向的自适应意义不大，但真正需要的时候就迷茫了。
在某些项目中，可能像我一样需要整个页面的全屏展示和分辨率适应，此时vw和vh就体现出它们的价值：
-
这是一个相对单位，相对于px而言，无需多言有其自适应的优势；
-
相对于百分比宽高和em而言，使用更为简便。
周知%是相对于其父级元素而言，而如果嵌套关系较多，或涉及margin、padding、定位等使用较多的情况时，都使用百分比会因为参考元素不同而较为混乱，或也可以实现效果但很不直观（同样是1%，长度可能天差地别）。
而使用em时，无法在是/否全屏显示这两种效果下达成较为完美的平衡（因为对于大多数浏览器而言，F11前后只改变了高度而宽度未改变，此时x向布局几乎无影响，而y向布局会“深受其害”）。而使用vw和vh分别作为x向和y向的长度单位，即可实现浏览器宽高改变时，等比例的放缩页面元素，实现较为初级的自适应。
问题
在使用中，仍有一些问题需要解决，在此记录。
- 字体大小没想好使用vw还是vh较好；
- 再结合min-width、min-height可实现更好的效果，还未测试；
- 只是等比例放缩，也许并不适用于大多数页面，或许bootstrap等框架更好（还不会用…）
鸣谢
相关知识源自：
https://www.zhangxinxu.com/wordpress/2012/09/new-viewport-relative-units-vw-vh-vm-vmin/
致谢！
结语
小白刚转行，经验尚浅，第一次发文，意在记录新学内容和开发感悟、磨炼自己，如能帮助到有这方面需要的朋友亦深感荣幸。望博友多多批评指正，不管是代码细节、行文方式或是发展方向等各方面的意见和建议都欣然接受，愿能共同学习、共同进步。
我是前端开发工程师，加油！