Question

<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宽度和高度在每个屏幕尺寸上有所不同，但此代码不起作用。任何帮助将不胜感激。：）

Answer 1

你不需要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

Answer 2

这可以使用vw / vh see here来回答。否则，使用简单的％值，通过将body css设置为width:100%;height:100%;，然后可以对任何子组件使用％值来为它们提供反应大小。

Answer 3

试试这个：

$(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'});

});

根据屏幕宽度和高度更改div宽度和高度

3 个答案: