在此情况下，网页的界面布局会根据当前浏览器的大小而变化和响应。 主要使用CSS的@media进行设计。 效果就像取网，用于取网的是响应式布局。 案例代码如下。
(1) HTML代码如下：
)2) CSS代码如下：
*{
margin: 0px；
padding: 0px；
}
. heading，
. container，
. footing{
margin : 10px自动；
}
. heading{
height:100px；
背景色： chocolate；
}
. left，
. right
. main{
背景色： aqua；
}
. footing{
height: 100px；
背景色： blanched almond；
}
/*960以上时，这样设计*
@ mediascreenand (最小宽度：960 px )。
. heading，
. container，
. footing{
width: 960px；
}
. left，
. main，
. right{
浮点：左；
height: 500px；
}
. left，
. right{
width: 200px；
}
. main{
玛姬- left : 5px；
margin-right: 5px；
width: 550px；
}
. container{
height: 500px；
}
}
@ mediascreenand (最小宽度：600 px ) and (最大宽度3360960 px ) {
. heading，
. container，
. footing{
width: 600px；
}
. left，
. main{
浮点：左；
height: 400px；
}
. right{
显示：无；
}
. left{
width: 160px；
}
. main{
width: 435px；
玛姬- left : 5px；
}
. container{
height: 400px；
}
}
@ mediascreenand (max-width :600 px ) {
. heading，
. container，
. footing{
width: 400px；
}
. left，
. right{
显示：无；
}
. main{
margin-top: 10px；
玛格琳- bottom : 10px；
width: 400px；
height: 420px；
}
. container{
height: 420px；
}
}
)3)最后运行效果如下：。