刚刚入行前端开发一年,经验欠缺,在新公司独立承担一个生产管理系统的前端开发工作。该系统操作页面均为全屏,页面固定但使用机器有所不同,且用户在使用时不保证能记得按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/
致谢!
结语
小白刚转行,经验尚浅,第一次发文,意在记录新学内容和开发感悟、磨炼自己,如能帮助到有这方面需要的朋友亦深感荣幸。望博友多多批评指正,不管是代码细节、行文方式或是发展方向等各方面的意见和建议都欣然接受,愿能共同学习、共同进步。
我是前端开发工程师,加油!