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。

Answer 2

首先获得当前窗口大小的宽度并乘以0.4，并将其赋予所需元素的宽度。

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

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

希望这是你正在寻找的东西：）

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

2 个答案: