我们应该遇到过这种情况:
在做有头像的时候,想让头像的背景圆,在不同设备上显示不同的大小,但是始终保持一个圆?应该怎么做?
解决方式:
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;
如果里面有元素就可以用定位了.