响应式html5模板的简单介绍

HTML5响应式网站模板和自适应网站模板有什么不同的地方？

其达到的效果都一致的，自适应屏幕大小来改变页面布局适应当前屏幕。

创新互联-专业网站定制、快速模板网站建设、高性价比伊犁网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式伊犁网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖伊犁地区。费用合理售后完善，十余年实体公司更值得信赖。

类似爸爸，老爸，爹地，叫法不一样而已。

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）往导航标签中添加如下代码，这样很方便地构件了一个简单的页面分类导航：

Home About Parent Page Child

One Child Two with child Child One Child

Two Child Three Child Three

Contact

复制代码

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

This is a title for post

Richard KS 20th March 2013 Tutorials HTML5, CSS3

and Responsive 10 Comments Lorem

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)，其中的内容可以是友情链接、附属导航或广告单元等。

代码如下：

Categories Category 1 Category 2

Parent Category Child One Child Two

Grandchild One Grandchild Two Grandchild Three

Child Three Category 3

Text Lorem Ipsum is simply dummy

text of the printing and typesetting industry.

复制代码

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

Copyright@ 2013 HTML5.com Privacy Policy - About Us

复制代码

步骤4 增加CSS样式

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

[/code] 然后在中下载这个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:auto; max-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: both; display: 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: absolute; left: 100%; top:0;

}

/* css for */

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

.content article { width:100%; float:left; padding: 0 0 1em; margin: 0 0 1em; border-bottom: 1px solid #ddd; }

article .entry { clear:both; padding: 0 0 1em; }

h1.post-title { font-size: 1.8em; margin:0; padding:0;}

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

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

.entry.post-content { font-size: 1.125em; margin:0; padding: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:left; text-align:left; }

footer .footer-right { width: 45%; float:right; text-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库放在标签前，代码如下：

复制代码

如何制作一个响应式的HTML5表格

举个实现HTML5响应式表格的实例，仅供参考：

HTML结构如下：

table id="miyazaki"

captionThe Films of Miyazaki/caption

thead

trthFilmthYearthHonor

tbody

tr

td data-th="Film"My Neighbor Totoro

td data-th="Year"1988

td data-th="Honor"Blue Ribbon Award (Special)

tr

td data-th="Film"Princess Mononoke

td data-th="Year"1997

td data-th="Honor"Nebula Award (Best Script)

tr

td data-th="Film"Spirited Away

td data-th="Year"2001

td data-th="Honor"Academy Award (Best Animated Feature)

tr

td data-th="Film"Howl’s Moving Castle

td data-th="Year"2004

td data-th="Honor"Hollywood Film Festival (Animation OTY)

/table

注意代码中的data属性，每一个单元格的data属性都与表格的header相对应。

CSS样式

表格基本的CSS样式如下：

table#miyazaki caption {

font-size: 2rem; color: #444;

margin: 1rem;

background-image: url(miyazaki.png), url(miyazaki2.png);

background-size: contain;

background-repeat: no-repeat;

background-position: center left, center right;

}

table#miyazaki {

border-collapse: collapse;

font-family: Agenda-Light; font-weight: 100;

background: #333; color: #fff;

text-rendering: optimizeLegibility;

border-radius: 5px;

}

table#miyazaki thead th { font-weight: 600; }

table#miyazaki thead th, table#miyazaki tbody td {

padding: .8rem; font-size: 1.4rem;

}

table#miyazaki tbody td {

padding: .8rem; font-size: 1.4rem;

color: #444; background: #eee;

}

table#miyazaki tbody tr:not(:last-child) {

border-top: 1px solid #ddd;

border-bottom: 1px solid #ddd;

}

下面是响应式表格的CSS代码：

@media screen and (max-width: 600px) {

table#miyazaki caption { background-image: none; }

table#miyazaki thead { display: none; }

table#miyazaki tbody td { display: block; padding: .6rem; }

table#miyazaki tbody tr td:first-child { background: #333; color: #fff; }

table#miyazaki tbody td:before {

content: attr(data-th); font-weight: bold;

display: inline-block; width: 6rem;

}

}

media query代码中隐藏表格的头部单元，并且将每一个单元格的data-th作为标签显示在单元格内容的前面。每一行的第一个单元格都设置了特别的背景色和前景色，使之更为清晰。

扩展

你现在可以缩放浏览器来看看效果，非常不错。但是上面的代码是不可扩展的：要添加一个新行必须手动为每个单元格添加一个data-th属性。要想做到自动化，可以在服务器端实现，如PHP。也可以通过javascript来实现它。

首先，将整个表格都进行简化：

table id="miyazaki"

captionThe Films of Hayao Miyazaki/caption

thead

trthFilmthYearthHonor

tbody

tr

tdMy Neighbor Totoro

td1988

tdBlue Ribbon Award (Special)

tr

tdPrincess Mononoke

td1997

tdNebula Award (Best Script)

tr

tdSpirited Away

td2001

tdAcademy Award (Best Animated Feature)

tr

tdHowl’s Moving Castle

td2004

tdHollywood Film Festival (Animation OTY)

/table

然后在文档的底部添加下面的javascript代码：

script

var headertext = [];

var headers = document.querySelectorAll("#miyazaki th"),

tablerows = document.querySelectorAll("#miyazaki th"),

tablebody = document.querySelector("#miyazaki tbody");

for(var i = 0; i headers.length; i++) {

var current = headers[i];

headertext.push( current.textContent.replace( /\r?\n|\r/,"") );

}

for (var i = 0, row; row = tablebody.rows[i]; i++) {

for (var j = 0, col; col = row.cells[j]; j++) {

col.setAttribute("data-th", headertext[j]);

} }

/script

上面的代码的意思是：获取每一个th中的文本内容，然后分别剔除它们的回车和换行符。然后将这些文本分别添加到适当的单元格的data属性上，添加的规则与CSS样式的规则相一致。（使用setAttribute要比dataset要好，后者只有在IE 11中得到支持。）