深入响应式布局兼容

发表于 | 分类于 | 浏览 次

CSS3 的 media query 在一定程度上满足了我们响应式布局的需求, 但是对于 IE9 以下的浏览器或者是不支持媒体查询
的浏览器, 就会布局错乱或者会出现滚动条使用户体验降低, 因此我们需要兼容性方案.

##兼容解决方案
参照 Boostarp 的解决方案, 引用了两个脚本(准确地来说应该是一个), 使用条件注释引入脚本.

1
2
3
4
<!-- [if lt IE9] >
    <script src="html5shiv.min.js"></script>
    <script src="respond.min.js"></script>
<! [end if]-->

具体的 API 调用这里不阐述, 详细请看对应的 github 上的 readme.markdown 文档.

##深入探究
上面的解决方案中, html5shiv 是用于兼容不支持 html5 的浏览器的, 而 respond 是用于兼容不支持媒体查询的浏览器的
而这里让人非常好奇, respond 内部做了哪些工作 ?

###Step 0: 检查样式表是否可以通配使用或特殊使用

1
2
//使用 window.matchMedia() 这个 API 来监测, 返回的是一个对象, 通过该对象的 metches 来确定是否有匹配
respond.mediaQueriesSupported = w.matchMedia && w.matchMedia( "only all" ) !== null && w.matchMedia( "only all" ).matches;

###Step 1: 获取 link

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
//获取文档所有的 link 外联标签
ripCSS = function(){
    //遍历 link 标签
	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";

		//only links plz and prevent re-parsing
		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 {
			    
				if( (!/^([a-zA-Z:]*\/\/)/.test( href ) && !base) ||
				    //去除协议名, 判断是否与当前域名一样
					href.replace( RegExp.$1, "" ).split( "/" )[0] === w.location.host ){
					// IE7 doesn't handle urls that start with '//' for ajax request
					// manually add in the protocol
					//如果 href 前面有双斜线, 则加上协议名
					if ( href.substring(0,2) === "//" ) { href = w.location.protocol + href; }
					
					//加入到请求队列中
					requestQueue.push( {
						href: href,
						media: media
					} );
				}
			}
		}
	}
	//发送请求
	makeRequests();
};

###Step 2: 加载 CSS Stylesheet

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
makeRequests = function(){
	if( requestQueue.length ){
		var thisRequest = requestQueue.shift();

		ajax( thisRequest.href, function( styles ){
		    //解析样式表
			translate( styles, thisRequest.href, thisRequest.media );
			//使用 hash 标记,防止重复加载
			parsedSheets[ thisRequest.href ] = true;

			// by wrapping recursive function call in setTimeout
			// we prevent "Stack overflow" error in IE7
			//防止递归调用过多致 IE7 栈溢出, 使用 setTimeout 定时器调用
			w.setTimeout(function(){ makeRequests(); },0);
		} );
	}
}

###Step 3: 解析样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
translate = function( styles, href, media ){
    //提取样式表中的 media 媒体查询
    //去除注释
	var qs = styles.replace( respond.regex.comments, '' )
	        //去除动画声明
			.replace( respond.regex.keyframes, '' )
			//查找 media
			.match( respond.regex.media ),
		//获取 media 长度
		ql = qs && qs.length || 0;

	//try to get CSS path
	href = href.substring( 0, href.lastIndexOf( "/" ) );

	var repUrls = function( css ){
	        
			return css.replace( respond.regex.urls, "$1" + href + "$2$3" );
		},
		useMedia = !ql && media;

	//if path exists, tack on trailing slash
	if( href.length ){ href += "/"; }

	//if no internal queries exist, but media attr does, use that
	//note: this currently lacks support for situations where a media attr is specified on a link AND
		//its associated stylesheet has internal CSS media queries.
		//In those cases, the media attribute will currently be ignored.
	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 ) );
		}
		//parse for styles
		else{
		    //存储样式应用宽度
			fullq = qs[ i ].match( respond.regex.findStyles ) && 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 ];

			if( isUnsupportedMediaQuery( thisq ) ) {
				continue;
			}

			mediastyles.push( {
			    //媒体类型
				media : thisq.split( "(" )[ 0 ].match( respond.regex.only ) && RegExp.$2 || "all",
				//rules 下标
				rules : rules.length - 1,
				hasquery : thisq.indexOf("(") > -1,
				minw : thisq.match( respond.regex.minw ) && parseFloat( RegExp.$1 ) + ( RegExp.$2 || "" ),
				maxw : thisq.match( respond.regex.maxw ) && parseFloat( RegExp.$1 ) + ( RegExp.$2 || "" )
			} );
		}
	}

	applyMedia();
}

###Step 4: 监听事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
//这个函数是绑定在 resize 事件上的, 当 resize 事件发生就会重新解析 CSS 样式并应用.
applyMedia = function( fromResize ){
	var name = "clientWidth",
		docElemProp = docElem[ name ],
		//监测是否是标准兼容模式(如果是则文档框度为 clientWidth, 如果不是则为 document.body.clientWidth)
		currWidth = doc.compatMode === "CSS1Compat" && docElemProp || doc.body[ name ] || docElemProp,
		styleBlocks	= {},
		lastLink = links[ links.length-1 ],
		now = (new Date()).getTime();

	//throttle resize calls
	//使用函数节流防止函数多次执行(绑定在 resize 事件上)
	if( fromResize && lastCall && now - lastCall < resizeThrottle ){
		w.clearTimeout( resizeDefer );
		resizeDefer = w.setTimeout( applyMedia, resizeThrottle );
		return;
	}
	else {
		lastCall = now;
	}

	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";

			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 there's no media query at all (the () part), or min or max is not null, and if either is present, they're true
			//使用 currWidth (也就是现在的文档宽度来与 min 和 max 来比较, 如果符合条件那么就将该样式加入到 styleBlocks 中)
			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 ] );
			}
		}
	}

	//remove any existing respond style element(s)
	//避免因为 resize 或者其他的原因, 过多地插入 style 标签, 所以再一次使用 applyMedia 将已经存在的 style 标签去掉, 使用 appendedEls hash 对象存储起来
	for( var j in appendedEls ){
		if( appendedEls.hasOwnProperty( j ) ){
			if( appendedEls[ j ] && appendedEls[ j ].parentNode === head ){
				head.removeChild( appendedEls[ j ] );
			}
		}
	}
	//将 appendedEls 长度设置为 0
	appendedEls.length = 0;

	//inject active styles, grouped by media type
	//插入 style 标签, 使用 media 属性来分组
	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 ){
				ss.styleSheet.cssText = css;
			}
			else {
			    //将 cssText 字符串插入到 style 标签中
				ss.appendChild( doc.createTextNode( css ) );
			}

			//push to appendedEls to track for later removal
			//标记已经插入的 style 标签
			appendedEls.push( ss );
		}
	}
}

##respond 的缺点
respond 需要在外部样式表后面马上引入, 有时会有较严重的闪屏(因为需要使用 ajax 来加载, 加载前后样式渲染不同)

##附录

###媒体查询设置多少个点? 为何要这么设置 ?
正确合理的响应点是需要根据内容或者设计来设定的.比如一行文字需要大概多少个字才能高效地去阅读.说到这里, 以前
在做项目的时候会倾向于设置 px 单位的响应点, 比如 1920px, 1366px, 1280px, 1080px, 960px, 768px, 640px, 320p
x 这样,但是其实可以使用 em 单位来定, 然后设置 html 中的 font-size 的字号, 因为响应式的网站同时兼容手机端与
PC 端, 字体在移动端会体验很好, 但是在 PC 端会显得有点小, 所以在 PC 端字体应该大一点.至于为何用 em 而不是px
是因为 px 随着宽度的响应, 需要改动非常多, 但是使用 em , 只需要改动 body 中的字号(响应的是浏览器字号).

1
2
3
4
5
6
7
8
9
html {
    font-size: 100%;
}

@media (min-width: 20em) {
    html {
        font-size: 200%;
    }
}

推荐阅读: why Ems?

结语: Boostrap 虽然在这个移动端横行的时代中显得被漠视, 但是毕竟它曾经是拥有众多用户的 UI 框架, 其中的解决方案以及思想还是非常值得我们学习的.