jquery - Dynamic border widths with jquery

Question

I'd like my borders to scale dynamically, so that they're always the same relative width.

Here, the green border is static, no matter how much you change the window: http://jsfiddle.net/bucR3/

Sadly. simply adding the rule

border: 4% solid green  

doesn't allow for dynamic borders, as shown here: http://jsfiddle.net/bucR3/1/

(It's not even valid)

How can I make adaptive borders that are always the same size relatively? Is there a jquery way, that can target < 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;
}

演示小提琴

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，您在调整大小时会覆盖它。然后边框是基本字体大小的一些倍数。但随后内容必须重置其字体大小。如果您将字体大小直接应用于带有边框的元素，则会中断。