当前位置:首页 > 开发 > Web前端 > 前端 > 正文

网页自适应设计

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

网页自适应设计

       网页对浏览器窗口的自适应支持变得越来越重要了。自适应响应设计更是异常火爆。再加上移动端的崛起,更是如日中天。以前为了适应不同屏幕分布率和浏览器窗口的扩大和缩小,需要设计几套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脚本,轻松实现页面自适应响应设计。

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

   

 

 

 

   

 

 

网页自适应设计

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
自适应网页设计(Responsive Web Design) 作者: 阮一峰 日期: 2012年5月 1日 随着3G的普及,越来
一、"自适应网页设计"的概念 2010年,Ethan Marcotte提出了"自适应网页设计"(Responsive Web Desig
随着3G的普及,越来越多的人使用手机上网。 移动设备正超过桌面设备,成为访问互联网的最常见终端。
自适应网页设计(Responsive Web Design) 随着3G的普及,越来越多的人使用手机上网。 移动设备正超
自适应网页设计很受欢迎,它绝对没有隐藏。这是专家们呼吁,很多品牌正在转换的一种形式。让同一张
今天设计了一个页面,如图: 但在改变浏览窗口大小之后,网页就变得"不堪入目"了, 问题的根源还得
自适应网页设计近来很流行,如果你接触比较少请参见 responsive sites。当然,对一个新手来说可能听
所谓自适应网页设计,是由Ethan Marcotte在2010年提出的名词,指可以自动识别屏幕宽度、并做出相应
随着3G的普及,越来越多的人使用手机上网。 移动设备正超过桌面设备,成为访问互联网的最常见终端。
自适应网页设计(Responsive Web Design) 作者:阮一峰 日期:<a style="margin-top: 0px; marg
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号