以下代码与瀑布流没有关系,知识由于开始的时候看了salvattore这个插件实现瀑布流,但是里面引用很多其他人的代码,由于代码写的比较混乱,看了一部分。比如:
window.matchMedia || (window.matchMedia = function() {
"use strict";
// For browsers that support matchMedium api such as IE 9 and webkit
var styleMedia = (window.styleMedia || window.media);
// For those that don't support matchMedium
if (!styleMedia) {
var style = document.createElement('style'),
script = document.getElementsByTagName('script')[0],
info = null;
style.type = 'text/css';
style.id = 'matchmediajs-test';
script.parentNode.insertBefore(style, script);
// 'style.currentStyle' is used by IE <= 8 and 'window.getComputedStyle' for all other browsers
info = ('getComputedStyle' in window) && window.getComputedStyle(style, null) || style.currentStyle;
styleMedia = {
matchMedium: function(media) {
var text = '@media ' + media + '{ #matchmediajs-test { width: 1px; } }';
// 'style.styleSheet' is used by IE <= 8 and 'style.textContent' for all other browsers
if (style.styleSheet) {
style.styleSheet.cssText = text;
} else {
style.textContent = text;
}
// Test if media query is true or false
return info.width === '1px';
}
};
}
return function(media) {
return {
matches: styleMedia.matchMedium(media || 'all'),
media: media || 'all'
};
};
}());
/*! matchMedia() polyfill - Test a CSS media type/query in JS. Authors & copyright (c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas, David Knight. Dual MIT/BSD license */
上面的代码让我学到: getComputeStyel ------http://www.zhangxinxu.com/wordpress/2012/05/getcomputedstyle-js-getpropertyvalue-currentstyle/
浏览器中可以利用matchMedia来匹配宽度,这么说来响应式设计不是凭空而来的;
styleMedia & media 是实现媒体查询的特例方法
window.matchMedia 调到ie8的环境时,及时页面的宽度大约400px window.matchMedia (“(min-width:400)”).matches也是错误的,这里的ie8无法识别@media
另外看到了一个浏览器探测的方法 http://www.w3cplus.com/css3/moving-ie-specific-css-into-media-blocks