Write Less, Do More(3)_H5之家 - 中国HTML5教程资源分享第一站

所谓的高宽最大化是我自定义的名称，其意思是说，只设计一个模版，这个模版无论是从宽度上还是高度上，都做成最大比例的设计图，例如：IOS的iphone系列它们的显示比例宽高之比为：2:3。iphone5显示比例约小些。而安卓系列品牌较杂，不同品牌不同的分辨率，即使同一品牌不同型号也有不同分辨率的。这个很纠结。

但大体上可以分为。2:3、3:4、3:5这三种比值。所以，为了兼容所有的浏览器，在设计图的时候要采用比值最小的为基本蓝图。即3:5的比例，也就是说以高度最高的为基本蓝图。为什么要这么做？以下来解释：

这里需要用到CSS3的几个重要属性即：

-webkit-background-size:100% 100%;

此属性为背景尺寸自动100%进行平铺和拉伸，我们可以使用这个尺寸来进行设置。第一个100%为X轴，第二个100%为Y轴。我们可以把Y轴的比例设置成auto。同时配合background-position属性来使用就可以达到自适应目的。如果我们想取图的上半部分则可以设置background-position：top;即可。这样当设计图做成3:5的分辨率时就会可以适应所有手机浏览器，3:5的手机自然是全屏。而2:3或是3:4的手机浏览器有了以上两种CSS样式控制就可以做到宽度全屏。而高度则根据background-position：top;取图的上半部分从而也是全屏（只是高度从上往下取到4，而未到5）。举个实际像素大家就明白了。比如一张效果图是320*516像素的。3:5高度的就是320*516，而2:3比例的则取图的320*480部分。下面的高度36像素就不取了。用这种方法达到全屏自动适应的目的。而内容部分高度和宽度都使用100%或是auto来进行设置即可。字体样式则采用em而非px。就可以了。

此方法有些笨拙，但只需要做一版就可以了。相比较前者省时一些。但效果不如前者好。各有利弊需要根据实际项目而酌情选定方案。

HTML5布局教程

html5基本布局

html5结构代码

<!DOCTYPE html> <htmlang = "en"> <head> <meta charset = "utf-8"> <title>HTML5 Demo</title> <body> <header> <hgroup> <h1>html5结构代码</h1> <h2>HTML5布局教程</h2> </hgroup> </header> <nav> <ul> <li></li> <li></li> </ul> <</nav> <section> <article></article> <aside></aside> </section> <section></section> <footer></footer> </body> </head>

html5详细页布局

html5结构代码

<!DOCTYPE html> <htmlang = "en"> <head> <meta charset = "utf-8"> <title>HTML5 Demo</title> <body> <header> <hgroup> <h1>HTML5布局教程</h1> <h2>html5详细页布局</h2> </hgroup> </header> <nav> <ul> <li></li> <li></li> </ul> <</nav> <article> <hgroup></hgroup> <section></section> </article> <aside></aside> <footer></footer> </body> </head>

如何让IE系列支持header、nav、section、article、aside、footer等HTML5标签

习惯用了火狐，谷歌浏览器的，可是子啊IE系列中html5代码标签用不了，请原谅我依然坚守XP系统。
那么如何让IE系列支持header、nav、section、article、aside、footer等HTML5标签呢？

让IE(包括IE6)支持HTML5元素，我们需要在HTML头部添加以下JavaScript，这是一个简单的document.createElement声明，利用条件注释针对IE来调用这个js文件。Opera，FireFox等其他非IE浏览器就会忽视这段代码，也不会存在http请求。

上面这段代码仅会在IE浏览器下运行，还有一点需要注意，在页面中调用html5.js文件必须添加在页面的head元素内，因为IE浏览器必须在元素解析前知道这个元素，所以这个js文件不能在页面底部调用。

这个html5的js文件是作者把他放在Google code project上提供给大家可以直接调用的，当然，如果觉得这样会影响你的网页打开速度，你可以把html5的js文件直接下载下来让后上传到自己的服务器单独调用。

以下是html5的js文件中的代码:

(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()

除了在网页中调用包含以上代码的js文件来让IE浏览器支持HTML5元素以外，你也可以以下面这种方式把代码直接添加到网页中。

还有布局中有用到

首先css样式给他们渲染个

header, footer, article, section, nav, menu, hgroup {display: block;}

IE6-IE8都无法去解析