自适应宽度布局

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

        在个人大做业开发中，按照要求，须要有两种布局：宽窄屏切换。当屏幕分辨率大于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样式便可。spa

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

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

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

        2. 两列布局（能够看作响应式）开发

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

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

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

        3. 三列布局io

        使用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. 混合布局

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