关于浏览器响应式的那些事 （兼容chrome、firefox、IE7/8）
1.html 的 meta 书写
meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"
meta name="viewport" content="width=device-width,initial-scale=1.0"
2.链接的css 文件内容
@media screen and (max-width: 1020px)
图片随视口缩小而缩小，你可以加上
img,iframe{
max-width: 100%;
box-sizing: border-box;
}
要是你想让有过渡效果，利用css3的属性
transition: 属性 1s ease
*以上两步只能做到在chrome和firefox中的媒体查询.
3.要做到IE7/8 也支持媒体查询，reponsed.min.js
下载地址:https://github.com/scottjehl/Respond
这样便做到了IE7/8也支持response.
4.有时候会根据视口大小，用js对DOM做一些动态操作
此时就涉及到了window的onresize和innerWidth
eg:
window.onresize=function(){
var broW=windows.innerWidth;
if(broW>900){
/*对DOM的操作1
}
else{
/*对DOM的操作1
}
}
这样就可以动态监听当前视口的改变，对你想要进行的DOM进行操作
* 问题是在IE7中的innerWidth是没有效的，此时我们就需要对document对象进行监听来获得等同innerWidth的方法
5.在IE7中动态获得当前视口的大小
var winSize = function() {
var e = window,
a = 'inner';
if (!('innerWidth' in window )){
a = 'client';
e = document.documentElement || document.body;
}
return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
};
6.在IE7/8中类似于onresize的方法
function debounce(callback, delay, context){
if (typeof(callback) !== "function") {
return;
}
delay = delay || 150;
context = context || null;
var timeout;
var runIt = function(){
callback.apply(context);
};
return (function(){
window.clearTimeout(timeout);
timeout = window.setTimeout(runIt, delay);
});
}
7.debounce中的callback方法
var winResizeHandler = function(event){
var winWidth=winSize().width;
if(broW>900){
/*对DOM的操作1
}
else{
/*对DOM的操作1
}
};
8.最后在window.onresize调用
window.onresize= debounce(winResizeHandler, 10);
9.对于图片在IE中的折行闪烁
因为IE中不支持0.5px,所以当你把图片设置成50%时。如果大容器是301，50%就是150.5px.这样图片就会折到下一行
解决方案：加起来的百分比小于100%就可以了。