Joe*_* B. 6 javascript html5 css3 responsive-design
我正在创建一个响应式网站,但似乎无法让它在IE中工作(我在IE8中测试).现在,我知道Internet Explorer 8及以下版本不支持CSS3媒体查询.但是我包含了css3-mediaqueries.js Javascript文件(由Google托管),但它仍然不起作用.
我删除了所有代码,只留下了最小的代码(字面上只有26行HTML和34行CSS).HTML成功验证为HTML5,CSS验证为CSS级别3.以下是代码:
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" />
<title>Responsive Site</title>
<link rel="stylesheet" type="text/css" href="css/custom.css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width: 800px)" href="css/responsive.css" />
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- css3-mediaqueries.js for IE less than 9 -->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</head>
<body>
<div class="wrapper">
<div id="article"> </div>
<div id="side"> </div>
</div>
</body>
</html>
custom.css:
@charset "UTF-8";
/*html5 display rule*/
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {display: block;}
body {margin: 0px; padding:0px}
.wrapper {
width:78%;
margin:0 auto}
#article {
float:left;
width:61.224489795%;
margin:20px 0 0 0;
padding:0;
height:500px;
background-color:#000}
#side {
float:right;
width:30.775510204%;
margin:20px 0 0 0;
padding:0;
height:500px;
background-color:#999}
responsive.css:
@charset "UTF-8";
#article {
width:100%}
#side {
width:100%;
clear:left}
除了无法使用@imported样式表(github和google代码项目中记录) - 如果没有以类似于以下格式明确说明媒体查询,则会出现问题:
@media screen and (min-width: 666px) and (max-width: 1000px)
相比:
@media and (min-width: 666px) and (max-width: 1000px)
请在这个项目的github问题部分查看这个问题 - 在尝试设置这个项目大约一个小时之后 - 我的媒体查询中缺少屏幕导致它们无法被识别.
我终于弄明白了！只需要更改几行代码。
一位朋友指出css3-mediaqueries.js Javascript 文件的文档如下：
注意：不适用于 @import'ed 样式表（出于性能原因，无论如何您都不应该使用它）。也不会监听 和 元素的 media 属性。
我在 HTML 文件的 link 元素中使用了 media 属性。因此，这就是我为解决该问题所做的操作：
在我删除的 HTML 文件中：
<link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width: 800px)" href="css/responsive.css" />
并将其替换为：
<link rel="stylesheet" type="text/css" href="css/responsive.css" />
然后我将媒体属性添加到我的responsive.css 文件中：
@charset "UTF-8";
@media screen and (max-width: 800px) {
#article {
width:100%}
#side {
width:100%;
clear:left}
}
但仍然没有成功。然后，我更改了responsive.css 文件中媒体和@charset 属性的顺序。我简单地重新排列了第 1 行和第 2 行：
@media screen and (max-width: 800px) {
@charset "UTF-8";
这就成功了。不确定为什么字符集的顺序会产生影响？也许有人可以解释一下。
感谢大卫提供的有用建议！工具棚中有多个选项很好，将来我可能会转向respond.js。但目前，我对 Google 托管的代码感到满意。
| 归档时间： |
|
| 查看次数： |
14099 次 |
| 最近记录： |