html5模板响应式的简单介绍

html5和响应式页面到底是有什么关系

html5是html4的更新标准。html5新增了一些html标签以及这些标签对应的css和js接口。 bootstrap是在html5标准形成之际推出的，因此bootstrap天生含有html5的一些标签和特性。 比如，bootstrap支持响应式设计，具体体现在bootstrap的css库（主要是启用了css3标准的media query功能）实现了各种设备下的一些预设的html＋css组件（就是一些半成品的代码片段，适合在网页各个地方复制粘贴）。

简单说：

html5是html的最新标准 ，体现在新标签，新css标准，新js接口

bootstrap是基于html5技术的一个好用的前端代码框架，可以简单的复制粘贴，修修改改做一个漂亮页面

响应式设计是一种设计实现理念 ，css3的meida query功能让这个理念的实现变的现实而方便。

H5是指在html5标准推行以后，利用html5新特性在手机上的配合市场营销采用了大量的js css 及canvas技术实现的页面。个人认为H5的概念很狭隘不能代表整个web前端，更不能包含webapp。 但H5的概念也可以变的更宽放，泛指一切在手机上实现的应用或页面。

相关问答

Q1: html5和响应式页面到底是有什么关系？

一、响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用大势所趋来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。

二、优点：面对不同分辨率设备灵活性强，能够快捷解决多设备显示适应问题。缺点：兼容各种设备工作量大，效率低下。代码累赘，会出现隐藏无用的元素，加载时间加长。其实这是一种折衷性质的设计解决方案，多方面因素影响而达不到最佳效果。一定程度上改变了网站原有的布局结构，会出现用户混淆的情况。

Q2: 怎么用html5完成响应式布局？

响应式布局最简单的就是用css3来实现。我举一个最简单的例子。

下面是html代码。

!DOCTYPE html

html lang="en"

head

meta charset="UTF-8"

meta name ="viewport" content="width = device-width,initial-scale=1"

titleindex01/title

link href="style01.css" type="text/css" rel="stylesheet"

/head

body

div class="heading"第一/div

div class="container"

div class="left"第二/div

div class="main"第三/div

div class="right"第四/div

/div

div class="footing"第五/div

/body

/html

下面是css3代码

*{

margin:0px;

padding: 0px;

}

.heading,

.container,

.footing{

margin: 10px auto;

}

.heading{

height: 100px;

background-color: red;

}

.left,

.right,

.main{

height: 300px;

background-color: yellow;

}

.footing{

height: 100px;

background-color: gray;

}

!--media="only screen and (max-width:640px)" 这句话的意思是:只要当渲染屏幕的宽度不大于640px的时候才会使用这个样式表--

@media screen and (min-width: 960px){

.heading,

.container,

.footing{

width:960px;

}

.left,

.main,

.right{

float: left;

height: 500px;

}

.left,

.right{

width:200px;

}

.main{

margin: 0px 5px;

width:550px;

}

.container{

height: 500px;

}

}

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

.heading,

.container,

.footing{

width: 600px;

}

.left,

.main{

float: left;

height:400px;

}

.right{

display: none;

}

.left{

width: 160px;

}

.main{

width: 435px;

margin-left: 5px;

}

.container{

height: 400px;

}

}

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

.heading,

.container,

.footing{

width: 400px;

}

.left,

.right{

width: 400px;

height: 100px;

}

.main{

margin-top: 10px;

width:400px;

height:200px;

}

.right{

margin-top: 10px;

}

.container{

height: 420px;

}

}

这样就可以实现简单的响应式布局！如果你想要了解的话，可以到华清远见学习一下。我就是在那里学习的。

Q3: html5怎么制作一个响应式网页？

HTML5 制作响应式网页，首先需要考虑是全平台适配还是只是移动端适配。这里以移动端响应式网站为例，讲述如何制作响应式网页。

1、选定基本设计尺寸，一般以1080为基准。确定响应式web设计的应用场景之后，和美工（或设计师）沟通，之前，一般需要美工出几套主流移动设备屏幕分辨率的设计图，现在，使用流式布局以及rem等可以使用一套设计图，以最常用的移动设备屏幕分辨率为基准。

2、当美工完成设计图之后，前端工程师的工作就开始了。这时你就可以使用PS或是FW进行切图了。一般说来，Fireworks cs6切图更快，但是Fireworks有时会有图片失真的情况发生，所以，有时需要使用PS进行配合，PS有切片工具可以专门用来切图。

具体代码：

(function (doc, win) {

var docEl = doc.documentElement,

resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

recalc = function () {

var clientWidth = docEl.clientWidth;

if (!clientWidth) return;

docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';

};