如何让头像的圆在不同宽度下大小不同?

我们应该遇到过这种情况:

在做有头像的时候,想让头像的背景圆,在不同设备上显示不同的大小,但是始终保持一个圆?应该怎么做?

解决方式:

1.js控制

获取屏幕的宽度来进行控制

还要使用js好麻烦

2.媒体查询

@media

不能自动改变,在一段限制内保持

3.使用css中vw单位

vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。

我们给定:height:15vw;width:15vw;

4.利用padding

当padding的属性值给定是百分比的时候,根据的是父元素的宽度*百分比

我们可以这样:

本身:width:50%;height:0;padding-top:50%;border-radius:50%;position:relative;

如果里面有元素就可以用定位了.