☭当前位置:逗文摘 > 随摘 > 浏览文摘

HTML5中用respond.js解决响应式布局问题

2021年03月13日 阅读量:

响应式布局,理想状态是对PC/移动各种终端进行响应。媒体查询的支持程度是IE9+以及其他现代的浏览器,这里我们需要借助这样一个文件:respond.js。自己在阅读了官方文档之后,进行了一系列测试。友情提示各位朋友,关于respond.js的使用,且听我慢慢道来。

书写基本样式

要想实现响应式布局,首先需要书写基本的响应式布局的样式。

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的实现思路:

第一步,将head中所有外部引入的CSS文件路径取出来存储到一个数组当中;

第二步,遍历数组,并一个个发送AJAX请求;

第三步,AJAX回调后,分析response中的media query的min-width和max-width语法(注意,仅仅支持min-width和max-width),分析出viewport变化区间对应相应的css块;

第四步,页面初始化时和window.resize时,根据当前viewport使用相应的css块。

核心结论

那么此时,就可以根据基本的实现思路,得到一些书写代码时要注意的地方:

1、需要启动本地服务器(localhost),不能使用普通本地的url地址(file://开头);

2、需要外部引入CSS文件,将CSS样式书写在style中是无效的;

3、由于respond插件是查找CSS文件,再进行处理,所以respond文件一定要放置在CSS文件的后面

4、另外,虽然把respond放置在head里还是在body后面都能够实现,但是建议放置在head中(具体原因在下面的文档提示中有提到)

5、最好不要为CSS设置utf-8的编码,使用默认(原因详见下面的文档提示部分)

文档提示

在官方文档当中的一些提示

1、越早的引入respond.js文件,也就越可能避免IE下出现的闪屏。

2、不支持嵌套的媒体查询

3、utf-8的字符编码对respond.js文件的运行有影响

官方API原文:if CSS files are encoded in UTF-8 with Byte-Order-Mark, they will not work with Respond.js in IE7 or IE8.

基本含义就是:utf-8格式的CSS文件字符编码会对插件造成影响。

但是在我使用IE6-8进行测试的时候,都能够正常显示(无论是在css文件中增加charset设置还是在link标签中增加charset设置)。因此,并不是太清楚这个位置bug的含义。

4、跨域可能会出现闪屏(还没有测试,具体情况不详)。

实际案例可查阅中国自动化仪表网:http://www.ybsell.com

实例demo

html文件部分

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5-响应式布局--respond.js-独行冰海</title>
<link rel="stylesheet" href="test.css" charset="utf-8">
<script src="respond.min.js"></script>
</head>
<body>
<div class="wrap" id="con">
让IE6~8支持响应式布局
</div>
</body>
</html>

相关阅读
庄家吸筹过程的三种走势图分析透彻:关于筹码分布的运用自用 操盘手天下第二主图指标Photoshop启动提示:$$$/ADMDialog/ifontproblemWarning=解决办法

随摘排行榜
自用 操盘手天下第二主图指标自用 益盟操盘手MACD优化指标实用MACD买入卖出方法HTML5中用respond.js解决响应式布局问题杨老师反弹步骤策略WIN7下打印机删除不了怎么办Photoshop启动提示:$$$/ADMDialog/ifontproblemWarning=解决办法杨凯老师非二选股步骤自用 操盘手筹码峰突破选股指标庄家吸筹过程的三种走势图

本站逗文摘纯属个人爱好摘录,如转载的内容无意侵犯了您的版权,请联系QQ3403003689,谢谢!