vh、vw、vmin、vmax

本文主要是介绍vh、vw、vmin、vmax，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1、分别是什么？

vh:指屏幕可见视窗的高，

vw:指屏幕可见视窗的宽，

vmin:vh和vw之间选较小的值，

vmax:vh和vw之间选较大的值。

2、和百分比的区别

百分比时基于父元素的宽高，而vh\vw\vmin\vmax基于屏幕可见视图的宽或者高

3、vmin妙用

比如想做一个适配pc端和手机端的圆

.circle{

    width: 100vw;

    height: 100vh;

    border:solid 1px black;

    border-radius: 50%;

}

显然获取的是一个椭圆：

所以首先圆的宽高时等长。那么width和height的单位怎么选呢？如果都填vh呢？

pc端显示相对正常：

移动端异常：因为直径是按照屏幕的高来决定，而手机端高大于宽，用单位vw同理。

这个时候用vmin就很好的规避适配异常的情况 

.circle{

    width: 100vmin;

    height: 100vmin;

    border:solid 1px black;

    border-radius: 50%;

}

这篇关于vh、vw、vmin、vmax的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---