响应式设计之 —— 兼容性分析 & 项目必备网址

兼容性分析 & 项目必备网址

一、picture 响应式图片

由于 picture在IE11都不支持，因此我们在做响应式网站的时候，如果我们使用picture就存在一定风险。

解决办法

picturefill

二、广告轮播+响应式

解决办法（一个比较好的组件）

OwlCarousel2

三、html5标签

html5标签在低版本的IE下兼容性不是很好

用于解决IE9以下版本浏览器对HTML5新增标签不识别，并导致CSS不起作用的问题。所以我们在使用过程中，想要让低版本的浏览器，即IE9以下的浏览器支持，那么这款html5shiv.js是一个非常好的选择！

解决办法

html5shiv

<!--[if lt IE 9]>
<script type="text/javascript"  src="http://www.ijquery.cn/js/html5shiv.js"></script>
<![endif]-->

四、Respond.js让IE6-8支持CSS3 Media Query

Respond.js让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。
缺点：仅支持media query的min-width和max-width（用于响应式够用）；支持跨域，虽然配置有点麻烦，实现跨域代价高而且有闪屏体验欠佳。

解决办法

Respond

五、主动性检测兼容性

解决兼容性的方案： 有时候我们可以主动去检测当前浏览器是否兼容某一特性，如果兼容，就添加某一个类，如果不兼容就添加 no-开头的类。通过两种不同的类，我们可以去决定使用不同的方案

解决办法

modernizr

六、css hack

推荐一个网站，可以提供不同浏览器的csshach方案

[BROWSERHACKS
](http://browserhacks.com/)

---

七、推荐网站一 —— png/jpg图片在线压缩网站

Tinypng

八、响应式网站手机预览

使用http-server建立一个本地服务器，然后就会提供两个ip地址，手机和电脑在同一个局域网下，就可以输入网址访问了

http-server

---