html5 怎么制作响应式网页

步骤1 创建空白的HTML 5模版

首先，我们创建一个空白的模版，代码很简单，如下所示：

复制代码

步骤2 增加HTML 5新标签 HTML 5中新增加了不少标签，如：

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section

在页面模版中，我们需要确保每个区域都能正确地对齐，因此需要使用HEADER、 NAVIGATION、 CONTENT、 SIDEBAR和Footer这些标签。代码如下所示：

复制代码

读者可能留意到这里使用的div id=”wrapper”，这个是稍候用来做meida query的时候调整全局CSS样式调整用的 步骤3 往HTML 5标签中增加代码

1）首先往标题中增加如下代码：

　Simple HTML5 Template

复制代码

2）往导航标签中添加如下代码，这样很方便地构件了一个简单的页面分类导航：

HomeAboutParent PageChild

OneChild Two with childChild OneChild

TwoChild ThreeChild Three

Contact

复制代码

3）使用标签来描述每一个要展示的内容实体,比如要展示的是多篇文章列表,其中的每一篇文章的具体内容就可以使用标签了。如下代码所示：

This is a title for post

Richard KS20th March 2013TutorialsHTML5, CSS3

and Responsive10 CommentsLorem

Ipsum is simply dummy text of the printing and typesetting industry.

Lorem Ipsum has been the industry's standard dummy text ever since the

1500s

复制代码

4）添加标签 HTML5提供的元素标签用来表示当前页面或文章的附属信息部分，可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别与主要内容的部分。

根据目前的规范，元素有两种使用方法：

被包含在中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的引用、词汇列表等。

在之外使用，作为页面或站点全局的附属信息部分；最典型的形式是侧边栏(sidebar)，其中的内容可以是友情链接、附属导航或广告单元等。

代码如下：

CategoriesCategory 1Category 2

Parent CategoryChild OneChild Two

Grandchild OneGrandchild TwoGrandchild Three

Child ThreeCategory 3

TextLorem Ipsum is simply dummy

text of the printing and typesetting industry.

复制代码

5）加上最后的标签，代码为：

Copyright@ 2013 HTML5.comPrivacy Policy - About Us

复制代码

步骤4 增加CSS样式

首先创建一个空白的样式，如下：

[/code] 然后在http://necolas.github.com/normalize.css/中下载这个css,然后将其内容复制到该空白的文件中代码如下： [code]body {

font-family: arial, sans-serif

font-size: 100%/* best for all browser using em */

padding:0

margin:0

}

*, html { line-height: 1.6em}

article img { width:automax-width:100%height:auto}

.sidebar a, article a, header a, footer a { color: #C30}

header a { text-decoration: none}

#wrapper {

font-size: 0.8em/* 13px from 100% global font-size */

max-width: 960px/* standard 1024px wide */

margin: 0 auto

}

/* css for */

header {padding: 1em 0 margin: 0px float: left width: 100%

}

header hgroup { width: 100%font-weight:normal}

/* css for */

nav

{display: block margin: 0 0 2em padding: 0px

float: left width: 100% background-color: #181919

}

nav ul ul {display: none}

nav ul li:hover >ul {display: block}

nav

ul {padding: 0 list-style: none position:

relative display: inline-table z-index: 9999

margin: 0px float: left width: 100%

}

nav ul:after {content: ""clear: bothdisplay: block}

nav ul li {float: left}

nav ul li:hover a {color: #fff}

nav

ul li a {display: block padding: 1em font-size:

1.125em color: #ccc text-decoration: none

margin: 0px background-color: #000 border-right: 1px

solid #333

}

nav ul li:last-of-type a {border-right: 1px solid transparent !important}

nav

ul ul {background: #5f6975 border-radius: 0px

padding: 0 position: absolute top: 100% width:

auto float: none

}

nav ul li:hover {background: #5f6975 color: #FFF

}

nav ul ul li a:hover {background-color: #4b545f

}

nav ul ul li {

float: none

border-bottom: 1px solid #444240

position: relative

}

nav ul ul li a {

padding: 0.5em 1em

font-size: 1em

width:10em

color: #fff

}

nav ul ul ul {

position: absoluteleft: 100%top:0

}

/* css for */

section.content { width: 70%float:left}

.content article { width:100%float:leftpadding: 0 0 1emmargin: 0 0 1emborder-bottom: 1px solid #ddd}

article .entry { clear:bothpadding: 0 0 1em}

h1.post-title { font-size: 1.8emmargin:0padding:0}

.entry.post-meta { color: #888}

.entry.post-meta span { padding: 0 1em 0 0}

.entry.post-content { font-size: 1.125emmargin:0padding:0}

/* css for */

aside.sidebar { width: 25%float:right}

aside.sidebar ul {width:100% margin: 0px padding: 0px float: left list-style: none

}

aside.sidebar

ul li {width:100% margin: 0px 0px 2em padding:

0px float: left list-style: none

}

aside.sidebar ul li ul li {margin: 0px 0px 0.2em padding: 0px

}

aside.sidebar

ul li ul li ul li {margin: 0px padding: 0px 0px 0px

1em width: 90% font-size: 0.9em

}

aside.sidebar

ul li h3.widget-title {width:100% margin: 0px

padding: 0px float: left font-size: 1.45em

}

/* css for */

footer {width: 98% float:left padding: 1% background-color: white margin-top: 2em

}

footer .footer-left { width: 45%float:lefttext-align:left}

footer .footer-right { width: 45%float:righttext-align:right}

复制代码

步骤5 为移动应用使用@media query查询 为了进行响应式设计，最佳的方案是使用@media query去进行查询，在上面的CSS代码中添加如下代码：

/* ipad 768px */

@media only screen and (min-width:470px) and (max-width:770px){

body { background-color: red} #wrapper { width:96%font-size: 0.6875em}

section.content, aside.sidebar { width:100%}

}

/* iphone 468px */

@media only screen and (min-width:270px) and (max-width:470px){

body { background-color: yellow} #wrapper { width:96%font-size: 0.6875em}

section.content, aside.sidebar { width:100%}

}

复制代码

步骤6 增加jquery,modernizer和html5shiv到标签中 这里推荐使用Modernizr 和html5shiv，它们都是一个能在多种浏览器中通过运行各种脚本兼容运行支持大部分HTML 5标签的插件。我们将它们和jQuery库放在标签前，代码如下：

0

复制代码

1.调整视口

代码实例：

<!DOCTYPE html>

<head>

    <meta charset="UTF-8" />

    <title>布局之路-移动端开发实例</title>

    <meta name="viewport" content="width=device-width,user-scalable = no" />

    <link rel="stylesheet" type="text/css" href="css/reset.css" />

</head>

<body>

    <div class="wrap"></div>

</body>

</html>

代码解析：由于使用不同设备打开网页时，宽度均有所不同，所以不能讲视口设置为固定值，应当为width=device-width,即将视口设置为当前设备的宽度。

2.确定设计图的最小字体

浏览器（部分）能够显示的最小字体未12px，当移动端页面宽度为320px时，要保证最小字体为12px，那么在1080px的设计图中，最小字体应当为42px。

代码实例：

    <style type="text/css">

        html {

            font-size: 42px

        }

    </style> 3.浮动布局

各个区块都是浮动的，不是固定不变的。为了能自适应各个窗口。

代码实例：

.main {

  float: left

  width: 70%

}

.box {

    float: left

    width: 60.93%

    font-size: 1.71rem

    text-align: center

    line-height: 4.64rem

}

float浮动的好处就是，如果宽度不够放置下这个元素，元素会自动滚动到下方。

4.通过媒介查询，为不同设备加载相应样式

有条件应用样式：

 <style>

    @media all and(min-width:500px){ ... }

    @media (orientation){ ... }

</style>

代码解析：

第一行媒体查询代码指的是：为宽度大于等于500px的设备设置样式。

第二行媒体查询代码指的是：为纵屏状态（可见区域大于或等于宽度）下的移动端设备设置样式。

有条件的加载样式表：

<head>

    <link rel="stylesheet" href="wide.css" media="screen and(min-width:1024)" />

    <link rel="stylesheet" href="mobile.css" media="screen and(max-width:320)" />

</head>

代码解析：

第一行媒体查询代码指的是：为宽度大于等于1024px的设备，加载wide.css文件。

第二行媒体查询代码指的是：为宽度小于等于320px的设备，加载mobile.css文件。

5.使用百分比和rem替换px

除了布局和文本，"自适应网页设计"还必须实现图片的自动缩放。

代码效果对比：

/*使用固定像素*/

.box {

    float: left

    width: 658px

    font-size: 72px

    text-align: center

    line-height: 195px

}

/*使用百分比和rem*/

.box {

    float: left

    width: 60.93%

    font-size: 1.71rem

    text-align: center

    line-height: 4.64rem

}

代码解析：

水平方向的值，将具体像素调整为百分比。百分比的计算是根据父级的内容区宽度进行计算的。

例如，父级宽度为1080px， 子级元素为197px，那么子元素转换为百分比为：197/1080*100%=18.24%。需要注意的是百分比根据父级计算，当标签结构级别不同时，计算公式中的“分母”也有所不同，在开发时这个地方很容易出现问题，请务必注意。

垂直方向的值，将具体像素调整为rem，与水平方向相比，垂直方向的计算就比较简单。例如，行高为195px，HTML标签当前的字体大小为42px，将行高转换为rem单位，即195/42= 4. 64rem。

---