IE6~8不支持CSS3 Media Query，需要借助respond.js插件。
respond.js插件下载地址：https://www.developgeek.com/plus/list.php?tid=62
demo.css 样式文件
html,body {height: 100%
}
@media only screen and (min-width: 480px){
body {
background: yellow
}
}
@media only screen and (min-width: 640px) and (max-width: 1024px) {
body {
background: green
}
}
@media screen and (min-width: 1024px){
body {
background: blue
}
}
respond.js demo实例
<!doctype html><html>
<head>
<meta charset="UTF-8">
<title>HTML5-响应式布局--respond.js-言成科技&HTML5学堂</title>
<link rel="stylesheet" type="text/css" href="demo.css" />
<script src="respond.min.js"></script>
</head>
<body>
<div class="wrap" id="con">
让IE6~8支持响应式布局——言成科技&HTML5学堂
</div>
</body>
</html>
注意：respond.min.js或者respond.src.js都可以使用，在上面给出的下载地址中下载即可。
IE6的显示效果
Tips：IE7-8的显示效果也是没有问题的，在此就不贴图处理了
这个没办法，首先css3开发的本身就没有考虑ie678，虽然有一些插件能做一些工作使得ie678兼容，但是那也只是一些简单的功能，如圆角、阴影等，但是想自定义字体这个是没有办法的，这个是硬性规定，而且主要是ie低版本根本就不知道什么是自定义字体。onepage-scroll 使用了 CSS3 transform 属性，所以不兼容 IE10 以下的浏览器。你可以设置 responsiveFallback: true 使页面在 IE8、IE9 中能够正常浏览,其他IE版本就别想了
