javascript - 当用户调整窗口大小时，页面布局发生变化？

Question

我有一个 div，我将其宽度设置为 40%。当用户调整页面大小时，div 的大小会根据调整窗口的大小而变化。我想要一个 javascript 或 jquery 代码，无论当前窗口的大小如何，它都将 div 的设置锁定为全屏的 40%。换句话说，当用户调整窗口大小时，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。