Question

我希望我的边框能够动态缩放，因此它们的相对宽度始终相同。

此处，无论您更改窗口多少，绿色边框都是静态的： http://jsfiddle.net/bucR3/

不幸的是。只需添加规则

border: 4% solid green

不允许使用动态边框，如下所示： http://jsfiddle.net/bucR3/1/

（甚至没有效果）

如何制作相对大小相同的自适应边框？是否有一种jquery方式，可以针对＆lt; IE 9？

Answer 1

如果您愿意为页面添加额外的标记，可以使用CSS解决方案：

<强> HTML

<div class="box"><div>I am a box</div></div>

<强> CSS

.box{
    color: white;
    padding: 4%;
    background: green;
}

.box > div {
    background: red;
}

<强> Demo fiddle

Answer 2

您可以将边框宽度表示为窗口内部宽度的函数，如下所示...

$(window).resize(function (){
    $(".box").css({"border-width": window.innerWidth/100 * 4});
});

Answer 3

您可以使用em，但这意味着您必须更明确地了解字体大小声明。查看更新的小提琴：http://jsfiddle.net/bucR3/3/

$(window)
    .on('resize', function() {
        $(document.body).css('font-size', Math.min(document.body.clientWidth / 1080, 1) * 10);
    })
    .trigger('resize');

基本上，正文的基本字体大小为10px，您可以在调整大小时覆盖它。然后边框是基本字体大小的倍数。但是内容必须重置字体大小。如果将字体大小直接应用于带边框的元素，则会中断。

动态边框宽度与jquery

3 个答案: