Media Queries之Respond.js
一、stackoverflow上面对css3-mediaqueries.js与respond.js的比较
css3-mediaqueries.js
Pros
Supports min, max and min+max mediaqueries
Supports px and em values
Reacts on window resize
Elaborates on-page CSS (style tag) and external stylesheets
Cons
Doesn't support width mediaquery
Doesn't elaborate link[media="screen and ..."] nor @imported stylesheet
respond.js
Pros
Supports min, max and min+max mediaqueries
Supports px and em values
Reacts on window resize
Elaborates external stylesheets only
Cons
Doesn't support width mediaquery
Doesn't elaborate on-page CSS, link [media="screen and ..."] nor @imported stylesheets
It may cause a javascript error when combined with jQuery on load events, to solve it you need to place the script at the end of the page
二、Respond.js源码分析
https://github.com/scottjehl/Respond
A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)
Respond.js应用的例子，参考http://skinnyties.com
查看skinnyties.com源代码，可以看到 
可以在GitHub上可以下载它的未压缩版本respond.src.js（或者将min文件format，不推荐，因为JS压缩后的变量名都是处理过的，不方便阅读），本文使用Fiddler进行本地重定向，分析源码。
1.监听resize事件，以达到改变窗口大小实时响应
function callMedia(){
applyMedia( true );
}
if( win.addEventListener ){
// 标准2级DOM事件模型
win.addEventListener( "resize", callMedia, false );
}
else if( win.attachEvent ){
// IE事件模型（6、7、8）
win.attachEvent( "onresize", callMedia );
}
2.提取CSS文件路径
var doc = win.document,
docElem = doc.documentElement,
mediastyles = [],
rules = [],
appendedEls = [],
parsedSheets = {},
resizeThrottle = 30,
head = doc.getElementsByTagName( "head" )[0] || docElem,
base = doc.getElementsByTagName( "base" )[0],
links = head.getElementsByTagName( "link" ),
requestQueue = [],
// 遍历CSS路径
ripCSS = function(){
for( var i = 0; i < links.length; i++ ){
var sheet = links[ i ],
href = sheet.href,
media = sheet.media,
isCSS = sheet.rel && sheet.rel.toLowerCase() === "stylesheet";
if( !!href && isCSS && !parsedSheets[ href ] ){
// selectivizr exposes css through the rawCssText expando
if (sheet.styleSheet && sheet.styleSheet.rawCssText) {
translate( sheet.styleSheet.rawCssText, href, media );
parsedSheets[ href ] = true;
} else {
// 判断条件：
// 1.有形如http://这样的href需要判断http://后面的根目录是否等于location.host。
// 2.不以形如http://这样开头的href，同时不包含<base>，
// 所以它不支持带有<base>的相对href
if( (!/^([a-zA-Z:]*\/\/)/.test( href ) && !base) ||
href.replace( RegExp.$1, "" ).split( "/" )[0] === win.location.host ){
requestQueue.push( {
href: href,
media: media
} );
}
}
}
}
makeRequests();
}
3.发送ajax请求返回CSS内容
// 递归执行获得CSS文本
// 递归配合shift()可以保证最后被遍历的CSS具有最高的优先级
makeRequests = function(){
if( requestQueue.length ){
var thisRequest = requestQueue.shift();
ajax( thisRequest.href, function( styles ){
translate( styles, thisRequest.href, thisRequest.media );
parsedSheets[ thisRequest.href ] = true;
// 在递归函数外面包裹一层setTimeout，
// 使得函数以异步的方式执行，防止栈溢出
win.setTimeout(function(){ makeRequests(); },0);
} );
}
}
// ajax方法
ajax = function( url, callback ) {
var req = xmlHttp();
if (!req){
return;
}
req.open( "GET", url, true );
req.onreadystatechange = function () {
if ( req.readyState !== 4 || req.status !== 200 && req.status !== 304 ){
return;
}
callback( req.responseText );
};
if ( req.readyState === 4 ){
return;
}
req.send( null );
}
4.取出CSS中具有形如 @media screen and (max-width: 480px) 的各个块
translate = function( styles, href, media ){
// 匹配各个@media {...}
var qs = styles.match( /@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi ),
ql = qs && qs.length || 0;
//try to get CSS path
href = href.substring( 0, href.lastIndexOf( "/" ) );
var repUrls = function( css ){
return css.replace( /(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g, "$1" + href + "$2$3" );
},
// useMedia=true表示<link>是否具有media属性并且
// CSS样式中没有@media块
useMedia = !ql && media;
//if path exists, tack on trailing slash
if( href.length ){ href += "/"; }
if( useMedia ){
ql = 1;
}
for( var i = 0; i < ql; i++ ){
var fullq, thisq, eachq, eql;
//media attr
if( useMedia ){
fullq = media;
rules.push( repUrls( styles ) );
}
// rules保存了每个@media块内部的样式
else{
fullq = qs[ i ].match( /@media *([^\{]+)\{([\S\s]+?)$/ ) && RegExp.$1;
rules.push( RegExp.$2 && repUrls( RegExp.$2 ) );
}
eachq = fullq.split( "," );
eql = eachq.length;
for( var j = 0; j < eql; j++ ){
thisq = eachq[ j ];
// 所有media块
mediastyles.push( {
media : thisq.split( "(" )[ 0 ].match( /(only\s+)?([a-zA-Z]+)\s?/ ) && RegExp.$2 || "all",
// 对应media块在rules数组中的样式
rules : rules.length - 1,
hasquery : thisq.indexOf("(") > -1,
minw : thisq.match( /\(\s*min\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/ ) && parseFloat( RegExp.$1 ) + ( RegExp.$2 || "" ),
maxw : thisq.match( /\(\s*max\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/ ) && parseFloat( RegExp.$1 ) + ( RegExp.$2 || "" )
} );
}
}
applyMedia();
}
5.将匹配的样式加入文档中
applyMedia = function( fromResize ){
var name = "clientWidth",
docElemProp = docElem[ name ],
// 取得当前页面宽度
currWidth = doc.compatMode === "CSS1Compat" && docElemProp || doc.body[ name ] || docElemProp,
styleBlocks = {},
lastLink = links[ links.length-1 ],
now = (new Date()).getTime();
// 函数节流，延迟调用
if( fromResize && lastCall && now - lastCall < resizeThrottle ){
win.clearTimeout( resizeDefer );
resizeDefer = win.setTimeout( applyMedia, resizeThrottle );
return;
}
else {
lastCall = now;
}
// 遍历所有media
for( var i in mediastyles ){
if( mediastyles.hasOwnProperty( i ) ){
var thisstyle = mediastyles[ i ],
min = thisstyle.minw,
max = thisstyle.maxw,
minnull = min === null,
maxnull = max === null,
em = "em";
// 支持以em为单位的宽度，定义了一个getEmValue方法计算em能换算成多少px
if( !!min ){
min = parseFloat( min ) * ( min.indexOf( em ) > -1 ? ( eminpx || getEmValue() ) : 1 );
}
if( !!max ){
max = parseFloat( max ) * ( max.indexOf( em ) > -1 ? ( eminpx || getEmValue() ) : 1 );
}
// 筛选宽度匹配的样式
if( !thisstyle.hasquery || ( !minnull || !maxnull ) && ( minnull || currWidth >= min ) && ( maxnull || currWidth <= max ) ){
if( !styleBlocks[ thisstyle.media ] ){
styleBlocks[ thisstyle.media ] = [];
}
styleBlocks[ thisstyle.media ].push( rules[ thisstyle.rules ] );
}
}
}
// 删除已存在的respond样式
for( var j in appendedEls ){
if( appendedEls.hasOwnProperty( j ) ){
if( appendedEls[ j ] && appendedEls[ j ].parentNode === head ){
head.removeChild( appendedEls[ j ] );
}
}
}
// 在文档中插入respond样式
for( var k in styleBlocks ){
if( styleBlocks.hasOwnProperty( k ) ){
var ss = doc.createElement( "style" ),
css = styleBlocks[ k ].join( "\n" );
ss.type = "text/css";
ss.media = k;
// originally, ss was appended to a documentFragment and sheets were appended in bulk.
// this caused crashes in IE in a number of circumstances, such as when the HTML element had a bg image set,
// so appending beforehand seems best. Thanks to @dvelyk for the initial research on this one!
head.insertBefore( ss, lastLink.nextSibling );
if ( ss.styleSheet ){
// IE下
ss.styleSheet.cssText = css;
}
else {
ss.appendChild( doc.createTextNode( css ) );
}
//存储在appendedEls中，下次以便跟踪删除
appendedEls.push( ss );
}
}
}
三、Respond.js带来的跨域请求问题
Respond.js通过ajax请求CSS文件，所以如果CSS文件存放在CDN上面（或者子域中），那么需要引入一个代理页面实现跨域连接。
引入方法：
<!-- Respond.js proxy on external server --> <link href="http://externalcdn.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy" /> <!-- Respond.js redirect location on local server --> <link href="/path/to/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" /> <!-- Respond.js proxy script on local server --> <script src="/path/to/respond.proxy.js"></script>
