【重构笔记-1】media query兼容IE

以下两个插件均不支持样式表跨域

页面布局变化时均有500ms左右的延迟

Respond.js

• Respond.js只支持media query的min-width和max-width属性

• 引入时，样式表放在Respond.js前面，且建议均在head中引入

• 当样式表在域名的子域名或者单独CDN中时，可按以下代码解决跨域问题

假设网站域名为www.domain.com




    
    
    
    
    
    
    
    
    


    
网页内容

css3-mediaqueries.js

• css3-mediaqueries.js支持media query几乎所有的属性

• 加载速度没有respond.js快

• 若样式表与网站不在一个域名下，可将含有media query的样式单独整理出来，并在head引入IE判断语句，如下：

js判断

• Respond.js支持的CSS属性有限。
• 由于在项目中我需要根据height进行媒体查询，因此选择了css3-mediaqueries.js插件。但是当应用到项目中时，一旦发生媒体查询整个页面就会卡死崩溃。
• 由于两个插件都不能达到自己项目预期的效果，最后只能自己用js写了一段适配代码。