网页自适应设计

网页自适应设计

       网页对浏览器窗口的自适应支持变得越来越重要了。自适应响应设计更是异常火爆。再加上移动端的崛起，更是如日中天。以前为了适应不同屏幕分布率和浏览器窗口的扩大和缩小，需要设计几套css样式，用js脚本判断窗口大小，选择加载。结构臃肿，加载负担较大。现笔者经过一定时间的学习，有所心得，故分享于此，加强交流，共同进步。同时希望对大家有所帮助。

 

1.纯净css实现自适应

 

a.一列宽度自适应

<div id="layout">一列宽度自适应</div>

    将元素width属性设置为百分比数值：

<style type="text/css">
    #layout{
        background-color: #cccccc;
        border: 2px solid #333333;
        width: 80%;
        height: 300px;
    }
</style>

 

 b.两列宽度自适应

<div id="left">左列</div>
<div id="right">右列</div>

    将元素width属性设置为百分比数值，注意要进行盒子模型计算，确定是否可以使用100%的宽度之和。这       里笔者由于有边框线2px的影响，故不使用和为100%。

<style type="text/css">
    #left{
        background-color: #cccccc;
        border: 2px solid #333333;
        width: 20%;
        height: 300px;
        float: left;
    }
    #right{
        background-color: #cccccc;
        border: 2px solid #333333;
        width: 70%;
        height: 300px;
        float: left;
    }
</style>

 

 c.两列右列宽度自适应

<div id="left">左列</div>
<div id="right">右列</div>

    将左栏宽度设定为固定值，右栏不设置任何宽度值，并且右栏不浮动即可。

<style type="text/css">
    #left{
        background-color: #cccccc;
        border: 2px solid #333333;
        width: 100px;
        height: 300px;
        float: left;
    }
    #right{
        background-color: #cccccc;
        border: 2px solid #333333;
        height: 300px;
    }
</style>

 

d.三列浮动中间列宽自适应

<div id="left">左列</div>
<div id="center">中列</div>
<div id="right">右列</div>

    左栏贴近左边缘，右栏贴近右边缘，中间不设定其浮动方式，但使其左，右外边距分别等于左，右栏宽         度，注意此宽度并非仅仅是设定的width属性值，此处需进行根据边框，内外边距计算得出。

<style type="text/css">
        #left{
            background-color: #cccccc;
            border: 2px solid #333333;
            width: 100px;
            height: 300px;
            position: absolute;
            top: 0px;
            left: 0px;
        }
        #right{
            background-color: #cccccc;
            border: 2px solid #333333;
            width: 100px;
            height: 300px;
            position: absolute;
            top: 0px;
            right: 0px;
        }
        #center{
            background-color: #cccccc;
            border: 2px solid #333333;
            height: 300px;
            margin-left: 104px;
            margin-right: 104px;
        }
        body{
          margin: 0px;
          padding: 0px;
        }
    </style>

 

 e.高度自适应

<div id="left"></div>

<style type="text/css">
        html,body{
            margin: 0px;
            height: 100%;
        }
        #left{

            background-color: #cccccc;
            border: 2px solid #333333;
            width: 300px;
            height: 100%;
            float: left;
         }
    </style>

    将html，body的width属性值设置为100%,使IE与Firefox浏览器均能够工作正常。对于浏览器差异，兼容问     题，笔者将会在后续博客谈到。此处暂且这样。

 

2. 采用bootstrap框架的栅格系统以及响应式工具，其bootstrap官方文档详细尽致。或者运用    css3的多列       布局。有关这些，笔者均会在后续博客谈到。此处笔者不再赘述。

 

3. 采用纯净css实现响应式设计

    笔者先展示一下效果：http://120.24.66.128/Me/，这是一个相当简单的自适应响应页面，当浏览器的窗口     宽度大于960px时，页面全景展示，当宽度介于600px与960px时，照片一块将不再出现，当小于600px         时，页面布局将采用一块一块自上而下，以便移动端浏览。除此之外，还做了一个皮肤效果。页面详细代     码尽可用浏览器查看。写的不好之处还请大家多多指正，笔者在此拜谢。

    核心代码其实很简单：

......//整体结构

@media screen and (min-width: 960px){
   ......//大于960px
}

@media screen and (min-width: 600px) and (max-width: 960px){
   ......//介于600px与960px
}

@media screen and (max-width: 600px){
    ......//小于600px
}

    无需加载多个css文件，也无需写js脚本，轻松实现页面自适应响应设计。

           以上是笔者对自适应网页的粗浅认识，学海无涯，笔者愿与大家一起交流，分享，共同成长，进步。     其中若有不妥之处，还请大家不惜笔墨。更希望技术大牛加以指导，笔者不胜感激。