当用户调整 window 大小时，页面布局发生变化？

Question

我有一个 div，我将其宽度设置为 40%。当用户调整页面大小时，div 的大小会根据调整大小 window 发生变化。我想要一个 javascript 或 jquery 代码，无论当前 window 的大小如何，都可以将 div 的设置锁定为全屏的 40%。换句话说，当用户调整 window 大小时，div 的 40% 大小相对于全屏保持锁定状态。

<div  style="width: 40%;">
<ul>
<a href="myBio.html"><li>My Bio</li></a>
<a href="favGam.html"><li>favorite Games</li></a>
<a href="jibPuz.html"><li>Jigsaw puzzle</li></a>
<a href="tabOfElm.html"><li>Table of Elements</li></a>
<a href="calc.html"><li>Calculator</li></a>
<a href="recBok.html"><li>Recommended Books</li></a>
<a href="canCod.html"><li>Canadian CoR&F </li></a>
<a href="newtLaw.html"><li>Newtons Law of Gravity</li></a>
</ul>
</div>

Answer 1

您将需要使用 JS 来执行此操作。

function resize() {
    $("#yourDiv").css("width", screen.width * 0.4);
}
$(window).resize(resize);
resize();

为您的 div 提供一个 ID。

Answer 2

首先得到当前window大小的宽度乘以0.4，得到你想要的元素的宽度。

function setWidth (){
 var getWidth = window.innerWidth * 0.4;
 $('elem').css('width', getWidth + 'px');
}

$(document).ready(function(){
 setWidth();
});

希望这就是您要搜索的内容:)

当用户调整 window 大小时，页面布局发生变化？

When a user resizes the window, the page layout changes?

html

javascript

css

jquery

percentage