自适应宽度布局
在开始开发之前,首先规划布局是一件很重要的事。
在我的大作业开发中,按照要求,需要有两种布局:宽窄屏切换。当屏幕分辨率大于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. 混合布局
通常是以上几种布局混合,即加上一个头,一个尾,中间是三列布局。具体视情况而定。
敢做,敢当当