如何使您的网页自动调整网络浏览器的大小？

Question

你好我想知道什么代码可以用于像这样site这样的自动调整网页，谢谢你的回答！

Answer 1

我使用媒体查询为您创建了一个小而有用的演示。有很多方法可以做到这一点，但在核心，大多数方法都使用这些基本功能。

这里是小提琴：http://jsfiddle.net/DIRTY_SMITH/ns3u7uf5/8/

html

<h1 class="header">YOUR HEADER OR SOMETHING</h1>
<div class="box-1">
    <h1>BOX 1</h1>
</div>
<div class="box-2">
    <h1>BOX 2</h1>
</div>
<div class="box-3">
    <h1>BOX 3</h1>
</div>

CSS

h1{text-align: center;}

.box-1, .box-2, .box-3{width: calc(100% / 3); height: 200px; background-color: blue; float: left;}
.box-2{background-color: red;}

/*stuff that will happen below 700px wide*/
@media (max-width: 700px){
    .header{display: none;}
    .box-1, .box-2, .box-3{width: 100%; height: 200px; background-color: red; float: left;}
    .box-2{background-color: blue;}
}