欢迎光临!中国网页设计提供最新的免费网页制作教程,网页设计技术,HTML5+DIV3...中国站长必上的网站。
加入收藏设为首页广告合作
您当前位置:网站首页 >> 网页制作 >> 网页布局 >> 十天学会响应式布局四:响应式布局的实现(案列)
  • 网页配色
  • 网页布局
  • 设计欣赏
  • 网页设计理论
  • HTML/HTML5
  • CSS
  • Javascript
  • Dreamweaver
  • FLASH
  • 十天学会响应式布局四:响应式布局的实现(案列)

    来源:段亮博客原创 浏览:2799

    内容提要:通过前面三讲,我们了解了响应式布局的基础知识,今天我们通过一个响应式布局框架案列,给大家讲解响应式布局的具体实现。

    通过前面三讲,我们了解了响应式布局的基础知识,今天我们通过一个响应式布局框架案列,给大家讲解响应式布局的具体实现。

    互联网的快速发展,以及html5+css3的迅速崛起,web前端人员必须学习新知识:响应式布局技术。

    因为响应式布局能同时兼容多个终端,比如(手机、平板、PC)做一个网站转眼间就可以变成多个网站,和现在相比是不是更加具有优势呢!

    十天学会响应式布局四:响应式布局的实现(案列)

    响应式布局的实现:案列一

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="gb2312">
    <title>响应式布局的实现-中国网页设计|www.xin126.cn</title>
    <meta name="keywords" content="响应式布局,响应式设计" />
    <meta name="description" content="十天学会响应式布局四:响应式布局的实现(案列)" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    *{margin:0;padding:0;text-decoration:none;list-style:none;
     font-size:14px;font-family:"微软雅黑";text-align:center;
     color:#fff;}
     .clear{clear:both;}
              #header,#content,#footer{margin:0 auto;margin-top:10px;}  
              #header,#footer{margin-top:10px;height:100px;}
     #header,#footer,.left,.right,.center{background:#333;}
    /*通用样式*/
     /*手机*/
    @media screen and (max-width:600px){
       #header,#content,#footer{width:400px;}
       .right,.center{margin-top:10px;}
       .left,.right{height:100px;}
       .center{height:200px;}
    }
    /*平板*/
    @media screen and (min-width:600px) and (max-width:960px){
        #header,#content,#footer{width:600px;}
    .right{display:none;}
    .left,.center{height:400px;float:left;}
    .left{width:160px;margin-right:10px;}
    .center{width:430px;}
    }
    /*PC*/
    @media screen and (min-width:960px){
        #header,#content,#footer{width:960px;}
    .left,.center,.right{height:400px;float:left;}
    .left{width:200px;margin-right:10px;}
    .center{width:540px;margin-right:10px;}
    .right{width:200px;} 
    }
    </style>
    </head>
    <body>
    <!--header start-->
    <div id="header">header</div>
    <!--end header-->
    <!--content start-->
    <div id="content">
    <div>left</div>
    <div>center</div>
    <div>right</div>
    <div></div>
    </div>
    <!--end content-->
    <!--footer-->
    <div id="footer">footer</div>
    <!--end footer-->
    </body>
    </html>

    通过上面代码可知:它是通过@media媒介查询判断来执行的CSS样式,也就是说:如果我要做一个响应式布局网站,同时兼容手机、平板、PC的话就得写三个与之对应的CSS样式,通过@media媒介查询来完成响应式布局。

    值得注意的是:在手机设备上,我们要禁止用户来缩放屏幕。不禁止的话,可能在显示上会造成错位,以及显示的不是手机网站的样式。所以,我们要通过代码来禁止用户在手机端上缩放屏幕,已达到正常的手机网站效果。

    禁止代码如下,需要加在头部标签里:

    <metaname=“viewport” content=“width=device-width; initial-scale=1.0”>

    该案例可以做为响应式布局设计的标准模板。

    如果你需要考虑更多屏幕尺寸的话,可以通过@media媒介查询判断屏幕尺寸,来执行相应的CSS样式。

    怎么样,响应式布局实现是不是很简单!

    发表评论 共有0人对本文发表评论
    网名:
    评论:
    验证:
    (网友评论仅供表达个人看法,并不表明本站同意其观点或证实其描述)
    联系我们 - 网站调查 - 免责声明 - 站长简介 - 站点综合查询 - 课件习题 - 友情链接 - 站长统计