Javascript 自动调整CSS边框宽度

我有一个div元素，例如：

<div style="height: 10%; width: 20%; border: 1px solid black">
     Div Content
</div>

Div内容

---

因为上面的div的高度和宽度都是%的，所以我希望在调整元素大小时也调整边框宽度。看起来除了像素之外，没有其他方法来命名边框宽度。那么，您知道如何调整边框宽度吗？

您可以使用jQuery。例如：

var x=$（“.div类”）.width（）或.height

现在您有了以像素为单位的div高度或宽度。进行一些计算以获得边界高度。例如，我们需要10%的高度<代码>变量边界高度=x*0.1现在只需为div

$（“div name”）.css（“border size”，borderHeight+“px”）
您可以使用百分比填充和带有背景色的包装来完成：

<div class="wrapper">
    <div class="content">
         Div Content
     </div>
 </div> 

.wrapper {
    background: #000;
    padding: 1%;
    width: 20%;
    height: 10%;
}

.content {
    background: #fff;
}


Div内容
.包装纸{
背景：#000；
填充：1%；
宽度：20%；
身高：10%；
}
.内容{
背景：#fff；
}

链接到jsfiddle:
我将使用媒体查询。根据窗口的宽度，为容器设置不同的边框宽度值。