现在的位置: 首页 > 综合 > 正文

【探索HTML5第二弹04】响应式布局（上），让我们一起来响应式布局吧【初探HTML5之使用新标签布局】用html5布局我的博客页！【实战HTML5与CSS3】免费制作威客页面啦（附源码）

2012年10月28日 ⁄ 综合 ⁄ 共 6080字 ⁄ 字号小中大 ⁄ 评论关闭

前言

第一次看到响应式布局这个东西的时候，我还以为又出了新东西呢，稍微研究了下才发现其实也是现有资源的组合而出的创新，中国什么时候也搞一个这种创新呢？

所谓响应式布局，大意是在不同设备上（不同尺寸下）都能以比较合理的方式显示，大家千万不要觉得iphone上的显示感觉还不差，我们就说说博客园吧，其实园子该改成响应式布局，只不过要花点功夫。

我们首先进入博客园后，手机对整个页面是有一定缩放的，所以看上去还是全屏呢，然后你要看其中一个内容还要滑大，左边完了要看右边又要滑过去，哎真是费力不讨好啊，不注意点到一个a标签又不见了，所以这真不是比较友好的界面。

响应式布局的提出是比较有意思的，根据不同的尺寸做不同的显示，甚至在小尺寸的情况下一些东西不让他显示，所以在各种屏幕上表现的都比较不错。

在前端界有个非常出名的网站叫做禅意花园，我个人感觉响应式布局的出现与之有异曲同工之妙，都是同样的html结构，但是在不同情况下显示便不一样了

Media Query（媒介查询）

在这两天的学习中，我感觉他就是响应式布局的主角了，能根据不同的尺寸加载不同的css样式，我们要做的就是在相同的html结构下，用css控制合适的显示即可。

 1 <style type="text/css">
 2     #container { width: 960px; margin: auto; }
 3     #wrap { width: 740px; float: left; }
 4     p { line-height: 600px; text-align: center; font-weight: bold; margin: 0 0 20px 0; }
 5     #main { width: 520px; float: right; background: yellow; }
 6     #sub01 { width: 200px; float: left; background: orange; }
 7     #sub02 { width: 200px; float: right; background: green; }
 8     /*--窗口1000px以上--*/
 9     @media screen and (min-width: 1000px) 
10     {
11         #container { width: 1000px; }
12         #wrapper { width: 780px; float: left; }
13         #main { width: 560px; float: right; }
14         #sub01 { width: 200px; float: left; background: orange; }
15         #sub02 { width: 200px; float: right; background: green; }
16     }
17      /*--窗口640px以上、999px以下--*/
18     @media screen and (min-width: 1000px) and (max-width: 999px)
19     {
20         #container { width: 640px; }
21         #wrapper { width: 640px; float: none; }
22         #main { width: 420px; float: right; }
23         #sub01 { width: 200px; float: left; background: orange; }
24         #sub02 { width: 100%; float: right; background: green; }
25     }
26      /*--窗口639px以下*/
27     @media screen and (min-width: 1000px) and (max-width: 999px)
28     {
29         #container { width: 100%; }
30         #wrapper { width: 100%; float: none; }
31         #main { width: 100%; float: right; }
32         #sub01 { width: 100%; float: left; background: orange; }
33         #sub02 { width: 100%; float: right; background: green; }
34     }
35     </style>

这便是基本语法，好了接下来我们来干点有意思的事情，一步一步响应式布局，第一步，我们去网上找点有意思的图片吧。

第一步，准备资源

本来是在网上找了很多资源psd资源的，本来想的是便切图便做来着，但是网上的资源基本都是外国的，而且切图搞起来也很慢，于是折腾了3个小时了，最后还是将原来的东西搞了出来。。。。以下是我原来做过的布局，现在拿出来看看，还是第一个作品呢：

【初探HTML5之使用新标签布局】用html5布局我的博客页！

这个页面明显不是响应式布局，那么我们今天就来修改修改吧。。。

  1 <!DOCTYPE html>

  2 <html xmlns="http://www.w3.org/1999/xhtml">

  3 <head>

  4     <title></title>

  5     <style type="text/css">

  6         body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin: 0; padding: 0; }

  7         h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }

  8         html, body { background: none repeat scroll 0 0 #FFFFFF; color: #000000; }

  9         body { background-image: url("http://common.cnblogs.com/Skins/sea/images/back.gif"); font-family: Verdana,Geneva,Arial,Helvetica,sans-serif; font-size: 13px; line-height: 1.5; word-wrap: break-word; }

 10         p { line-height: 1.7;}

 11         a { text-decoration: none; color: #1A8BC8; }

 12         a:visited { color: #1A8BC8; }

 13         li { list-style: none; }

 14         img { border: none;}

 15         footer { text-align: center; color: Gray;}

 16         .c { clear: both;}

 17         .l-h-1 { line-height: 1;}

 18         .f-n { float: none;}

 19         .l { float : left;}

 20         .r { float: right;}

 21

 22

 23         .header { background: white url("http://common.cnblogs.com/Skins/sea/images/bg_header.jpg") no-repeat left top; height: 195px; border: 1px dotted #8B8D72; }

 24         .header hgroup{ margin: 50px 0 0 265px;  }

 25         .header h1 a{ font-size: 17px; font-weight: bold; text-decoration: none; color: Black;}

 26

 27         .nav { margin: 0 20px 20px 260px; background: white; border: 1px dotted #8B8D72; border-top: none;}

 28         .nav ul{ padding: 5px 0 0 5px; }

 29         .nav li{ display: inline; padding: 5px 5px 0; }

 30         .nav aside { text-align: right; padding: 0 5px 5px;}

 31

 32         .main { margin: 0 20px 20px 260px; background: white; border: 1px dotted #8B8D72; padding: 20px;}

 33         .main article header { margin-bottom: 10px; }

 34         .main article header h1{ font-size: 16px; font-weight: bold; }

 35         .main article header h1 a{ color: #1A8BC8; text-decoration: none; }

 36         .main article header h1 time, .main article header h1 span{ font-size: 12px; font-weight:  normal; float: right; }

 37         .main article section h2{ background: none repeat scroll 0 0 #2B6695; border-radius: 6px; box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5); color: #FFFFFF; font-size: 14px; font-weight: bold; height: 25px; line-height: 25px; margin: 15px 0 !important; padding: 5px 0 5px 20px; text-shadow: 2px 2px 3px #222222; }

 38         .main .book { margin: 10px; }

 39         .main .book header { border-bottom: 1px solid  #2B6695; }

 40         .main .book .author { font-weight: bold;}

 41         .main .book h3 { background: #2B6695; padding: 5px 20px; border-radius: 4px 4px 0 0; display: inline-block; margin-left: 20px; font-weight: bold; color: White; }

 42

 43         .main .green_channel { border: 1px dotted #8B8D72; padding: 10px 10px ; margin: 10px 0 10px 0; width: 420px;}

 44         .main .green_channel a { margin: 0 2px; display: inline-block; padding: 2px 10px; font-size: 12px; font-weight: bold; color: White; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg%3D%3D") repeat-x scroll 0 0 transparent;}

 45         .main .green_channel .green { background-color: #2DAEBF; }

 46         .main .green_channel .red { background-color: #E33100;}

 47         .main .green_channel .yellow { background-color: #FFB515;}

 48         .main .green_channel .gray { background-color: #EEEEEE; color: #555555;}

 49         .main .green_channel img { vertical-align: -7px;}

 50

 51         .main .author_info { display: inline-block; }

 52         .main .author_info .info_txt { display: inline-block; text-decoration: none; font-size: 12px; line-height: 1.5 }

 53         .main .digg { float: right;}

 54         .main .digg div { margin: 0 10px; display: inline-block; color: #075DB3; font-family: Verdana; font-size: 14px; text-align: center;}

 55         .main .digg div.f-n { float: none; display: block;color: gray; font-size: 12px;}

 56         .main .digg .top { background: url("http://static.cnblogs.com/images/upup.gif") no-repeat scroll 0 0 transparent; width: 46px; height: 52px;}

 57         .main .digg .down { background: url("http://static.cnblogs.com/images/downdown.gif") no-repeat scroll 0 0 transparent; width: 46px; height: 52px;}

 58

 59         .aside { position: absolute; left: 20px; top: 105px; width: 220px; border: 1px dotted #8B8D72; background: white;}

 60         .aside .my_info { margin: 10px; line-height: 1.4;}

 61         .aside .side_bar { margin: 10px;}

 62         .aside .side_bar h3{ background: url("http://common.cnblogs.com/Skins/sea/images/bg_listtitle.gif") ; background-repeat: no-repeat; margin: 10px 0; font-weight: bold;}

 63

 64         .comment { margin: 0 20px 20px 260px;}

 65         .comment h2 { padding: 5px 0;}

 66         .comment li { padding: 5px 15px; margin: 10px 0; border: 1px dotted #8B8D72; background: white; }

 67         .comment li a{ padding: 0 3px; }

 68     </style>

 69 </head>

 70 <body>

 71     <header class="header">

 72         <hgroup>

 73             <h1>