0

境界線が常に同じ相対的な幅になるように、境界線を動的にスケーリングしたいと思います。

ここでは、ウィンドウをどれだけ変更しても、緑色の境界線は静的です: http://jsfiddle.net/bucR3/

悲しいことに。単純にルールを追加する

border: 4% solid green

ここに示すように、動的な境界線は許可されていません: http://jsfiddle.net/bucR3/1/

（それも有効ではありません）

相対的に常に同じサイズのアダプティブ ボーダーを作成するにはどうすればよいですか? < IE 9 をターゲットにできる jquery の方法はありますか?

4

3 に答える 3

2

ページに追加のマークアップを追加したい場合は、CSS ソリューションを利用できます。

HTML

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

CSS

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

.box > div {
    background: red;
}

デモフィドル

于 2013-08-13T22:55:47.343 に答える
0

次のように、ボーダー幅をウィンドウのinnerWidthの関数として表現できます...

$(window).resize(function (){
    $(".box").css({"border-width": window.innerWidth/100 * 4});
});
于 2013-08-13T22:48:45.717 に答える
0

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 で、サイズ変更時に上書きします。そして、ボーダーは基本フォントサイズの倍数です。ただし、コンテンツのフォントサイズをリセットする必要があります。境界線のある要素にフォント サイズを直接適用すると、これが壊れます。

于 2013-08-13T22:53:31.273 に答える