dom自适应大小与排版的一些研究

今天在研究怎么不用Media Queries去写几套css，直接用vw，vh这些自适应单位去自适应一些绝对定位的dom

刚开始入手时遇到的几个问题：

1.图片是正圆，屏幕高宽比率不同，用%之类的获取父级高宽的自适应单位，就不能达到正圆效果

2.如果高宽统一用vw作单位，能达到正圆，但在排版时，垂直布局top用vh，dom的高度用vw就预计不到高度，影响下面元素的位置

围绕这两点，理清思路就是：正圆的单位必须统一依赖（只能父级的高或宽），垂直布局参考轴用vh

于是，把正圆的高与宽都设为40vh，往下面的dom就可以用top：vh继续排列了

（bofangpanbox为外面绿圈容器）

#bofangpanbox{
    height: 40vh;
    width: 40vh;
    position: absolute;
    border-radius: 80%;
    border: 5px solid rgb(56,210,85);
    top: 5vh;
    margin-left: -20vh;
    left: 50%;

}

#bofangpan{
    height: 85%;
    width: 85%;
    position: absolute;
    border-radius: 80%;
    left: 50%;
    top: 50%;
    margin-left: -17vh;
    margin-top: -17vh;


}

在水平布局的居中上，播放盘左边距为：40vh*0.85/2=17vh，从而达到居中