自适应宽度布局

        在开始开发之前，首先规划布局是一件很重要的事。

        在我的大作业开发中，按照要求，需要有两种布局：宽窄屏切换。当屏幕分辨率大于1025px时，使用宽屏布局；当屏幕宽度小于1025时，使用窄屏布局。于是去研究了一下，发现原来css早已有样式，直接实现，省去了很多工作。

        代码如下：

<link rel="stylesheet" type="text/css" href="normalScreen.css" media="screen and (max-width: 1025px)" />
<link rel="stylesheet" type="text/css" href="widthScreen.css" media="screen and (min-width: 1025px)" />

        即，引入两个不同的css文件。其中，normalScreen.css为窄屏布局，当屏幕宽度不大于1025px时使用；widthScreen.css为宽屏布局，当屏幕尺寸不小于1025px时使用。如上，已经一目了然了。接下来所要做的就是写不同的css样式即可。

        既然用到了布局，顺便去了解了一下几种常用的布局知识。

        1. 单列布局（非响应式）

        百度、新浪等网站都使用这种布局方式。具体实现就是固定宽度（比如页面宽度设为1024px），然后居中显示即可。

        2. 两列布局（可以看做响应式）

        使用float样式。一列float:left; 另一列floa:right;

<div class="left">我是左边一列</div>
<div class="right">我是右边一列</div>

.left{
    float:left;
}
.right{
    float:right;
}

        3. 三列布局

        使用absolute样式。

<div class="left">我是左边一列</div>
<div class="middle">我是中间一列</div>
<div class="right">我是右边一列</div>

.left{
    position: absolute;
    left: 0;
    top: 0;
}
.middle{
    margin: 0 300px 0 300px;
}
.right{
    position: absolute;
    right: 0;
    top: 0;
}

        相当于左右两列宽度固定，都为300px，中间列左右边距各为300。

        4. 混合布局

        通常是以上几种布局混合，即加上一个头，一个尾，中间是三列布局。具体视情况而定。