<html><head>
<script src="js.js"></script>
<title></title>
<style>
#box
{
background:red;
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var x=$(window).width();
var y=$(window).height();
var a=x/2;
var b=y/2;
$(document).ready(function(){$("#box").css(width,a)});
$(document).ready(function(){$("#box").css(height,b});
</script>
</body>
</html>
我希望 div 的宽度和高度在每个屏幕尺寸上有所不同，但这段代码不起作用。任何帮助将不胜感激。:)
你不需要 JS。使用该 CSS：
#box {
background-color: red;
width: 50%;
height: 50%;
/* left: 25%; */ /* uncomment if you want to center horizontally */
/* top: 25%; */ /* uncomment if you want to center vertically */
position: absolute;
}
工作样本：http: //jsbin.com/eZUkADe/1/edit
如果您必须使用 jQuery 来实现这一点，那么您就是：
$(document).ready(function(){
var x=$(window).width();
var y=$(window).height();
var a=x/2;
var b=y/2;
$("#box").css('width', a);
$("#box").css('height', b);
});
工作样本：http: //jsbin.com/UXAPUSo/1/edit
尝试这个：
$(document).ready(function(){
var x=$(window).width();
var y=$(window).height();
var a=x/2;
var b=y/2;
$("#box").css({width:a+'px',height:b+'px'});
});
这可以使用 vw/vh 来回答，请参见此处。否则，使用简单的 % 值，通过将 body css 设置为width:100%;height:100%;，然后您可以对任何子组件使用 % 值来为它们提供响应大小。