动态调整div大小 html,如何动态的根据用户屏幕的分辨率改变div的大小？

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

html:

1

2

3

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);

}

触发方式：