HTML5和CSS3 Media Queries响应式Web设计方案

HTML5.js

IE是永恒的话题；对于我们使用的HTML5标签，IE9之前的版本无法提供支持。目前的最佳解决方案仍是通过html5.js来帮助这些旧版本的IE浏览器创建HTML5元素节点。在我们的页面HTML代码中调用该JS文件：

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

CSS

HTML5块级元素样式

首先仍是浏览器兼容问题。虽然我们已经可以在低版本的IE中创建HTML5元素节点，但还是需要在样式方面做些工作，将这些"新"元素声明为块级：

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {     display: block; }

主要结构的CSS

忽略细节，我们仍是将注意力集中在大问题上。正如在前文"概述"中提到的，默认情况下页面容器的固定宽度为980像素，页头部分（header）的固定高度为160像素；主要内容部分（content）的宽度为600像素，左浮动；侧边栏（sidebar）右浮动，宽度为280像素。

#pagewrap {
    width: 980px;
    margin: 0 auto;
}
 
#header {
    height: 160px;
}
 
#content {
    width: 600px;
    float: left;
}
 
#sidebar {
    width: 280px;
    float: right;
}
 
#footer {
    clear: both;
}

截至目前的效果演示

目前我们只是初步完成了页面结构的HTML和默认结构样式，当然，并不包括那些与话题无关的细节实现问题。正如可以在目前的演示中看到的，由于还没有做任何media query方面的工作，页面还不能随着浏览器尺寸的变化而改变布局。

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!