javascript - 如何动态的根据用户屏幕的分辨率改变div的大小？

Question

我想设计一个 app 产品主页，主页分 3 屏，要求网页会根据用户设备的分辨率自动调整每一屏的大小，例如我现在的 1366*768 则每屏显示 1366*768；如果另外有用户的分辨率是 1280*768 则显示 1280*768。而且下面的代码好像不能改变，请教大神们叫我怎么做！谢谢了！

html:

<p class="container test1" id="d1">
1
</p>
<p class="container test2">
2
</p>
<p class="container test3">
3
</p>

css:

.test1 {
    margin:0px;
    padding:0px;
    width:100%;
    background:#ffba00;
    min-height:600px;
    }
.test2 {
    width:100%;
    height:100%;
    background:#fc69aa;
    }
.test3 {
    width:100%;
    height:100%;
    background:#4ec2fb;
    }

javascript:

function redirectpage() {  
var w=screen.width;
var h=screen.height;
document.getElementById("d1").height = h;
alert(document.getElementById("d1").height);
}  

触发方式：

Answer 1

实现响应式设计，一般使用只用 css3 的媒体查询就可以了, 没必要使用 js。

如

@media (min-width:1280px) {
    .container {
        ...
    }
}

@media (min-width:768px) {
    .container {
        ...
    }
}

Answer 2

使用css3 的媒体查询比较好，例子可以看我的博客 http://wtser.com

改变窗口大小看看效果

Answer 3

使用media就可以了