碎碎念： 前端领域在html5定稿以后，又迎来了新一轮热潮．第一次接触HTML5是公司需要做一个移动端网站．HTML5添加了一些新的元素和新的元素属性．结合CSS3能创造出复杂的原来在js下才能实现的效果，更加方便开发者开发出绚丽的效果．目前大部分mobile浏览器基于webkit技术，对HTML5和CSS3的支持也非常好,所以不管是响应式web页面还是安卓和iso开发的内嵌页面，使用html5成为了很多公司的选择．

这里是自己进行响应式开发的一些记录:

第一部分常用配置：

1.在html5中声明更加简单:

<!DOCTYPE html>  #无需声明版本号
<meta charset="UTF-8"> #指定字符
<script src="test.js"></script> #加载js文件
<link rel="stylesheet" href="test.css"> #加载css文件

2.将页面设置为响应式页面推荐meta：

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0" />

3.页面字体推荐使用rem

html {font-size: 62.5%; -webkit-text-size-adjust: 100%;} #网页默认字体是16px,所以设定全局字体16*%62.5 = 10px
body {font-size: 1.4rem} #body全局字体是14px

4.响应式开发必须理解的概念:

流式布局， 媒体查询(media query)， 视口(viewport).. 流式布局: 即所有参与的div都用float: left;宽度用百分比表示.. 媒体查询: 判断屏幕分辨率并应用对应的CSS,用@media实现媒体查探, 语法为

/* PC宽屏样式*/
默认
/* iPad及以下，所有小于（不等于）960宽度的平板电脑*/
@media only screen and (max-width: 959px) {}
/* 仅iPad竖版，所有小于（不等于）960宽度的平板电脑的竖版*/
@media only screen and (min-width: 768px) and (max-width: 959px) {}
/* iPhone及以下*/
@media only screen and (max-width: 767px) {}
/* 仅iPhone横版，包括某些平板电脑的竖版*/
@media only screen and (min-width: 480px) and (max-width: 767px) {}
/* 仅iphone4 竖版*/
@mediaonly screen and (max-width: 479px) {}

5.全局字体配置(个人常用)

font-family: Helvetica, Tahoma, Arial, "Microsoft YaHei", "微软雅黑", SimSun, "宋体", Heiti, "黑体", sans-serif;
其他推荐参考：font-family:tahoma,arial,\5b8b\4f53,sans-serif;

6.如何将html5中新添加的元素如header footer等应用到IE等暂时还不支持html5的浏览器中,一位大牛写过这样一个脚本，供我们使用，这样我们就可以在自己的项目中随意使用html5的元素了．注：　这段代码最好是下载下来放到自己的项目中．

<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
  </script>
<![endif]-->

7.在html5中提供了data-*属性,我们可以为任何元素添加该属性，并且在jquery中提供了对该值的读取和设置.

html:  <div id="myid" data-myid="product1">
jquery获取值: var myid = $("#myid").data('myid')

8.响应式图片 哪些能缩放(地图等允许用户放大查看的图片)，哪些不能缩放(普通图片)? 在不同的视口条件下加载不同尺寸的图片,这个可以在服务器端的上传图片过程中实现. 也可对同一张图进行不同的定位,如pc端显示全部，移动端显示局部．如：

#手机端
.image {
  width: 100px; height:100px;
  background-position: x y;
}
#移动端
@media only screen and /*tablet or mobile*/ {
  .image{
    width:20px;height:20px;
    background-position:xy;
  }
}

全局样式配置代码段:

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}

css中link的a标签的四种状态:

a:link, a:visited, a:hover, a:active {
  text-decoration: none;
}

safari中的mailto样式强制覆盖:

a[href^=tel] { color: inherit; text-decoration: none; }

第三部分常见bug:

1.当一个div设置宽度为100%时, 若为其添加边框效果会出现出现横向滚动，解决方法是设置box-sizing的值. 2.修复手机版submit按钮在safari下面的bug: -webkit-appearance: none;

修复手机版text input在safari默认带圆角: border-radius: 0;