響應式設計之 —— 兼容性分析 & 項目必備網址

兼容性分析 & 項目必備網址

1、picture 響應式圖片

因爲 picture在IE11都不支持，所以咱們在作響應式網站的時候，若是咱們使用picture就存在必定風險。

解決辦法

picturefill

2、廣告輪播+響應式

解決辦法（一個比較好的組件）

OwlCarousel2

3、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]-->

4、Respond.js讓IE6-8支持CSS3 Media Query

Respond.js讓不支持css3 Media Query的瀏覽器包括IE6-IE8等其餘瀏覽器支持查詢。
缺點：僅支持media query的min-width和max-width（用於響應式夠用）；支持跨域，雖然配置有點麻煩，實現跨域代價高並且有閃屏體驗欠佳。

解決辦法

Respond

5、主動性檢測兼容性

解決兼容性的方案： 有時候咱們能夠主動去檢測當前瀏覽器是否兼容某一特性，若是兼容，就添加某一個類，若是不兼容就添加 no-開頭的類。經過兩種不一樣的類，咱們能夠去決定使用不一樣的方案

解決辦法

modernizr

6、css hack

推薦一個網站，能夠提供不一樣瀏覽器的csshach方案

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

---

7、推薦網站一 —— png/jpg圖片在線壓縮網站

Tinypng

8、響應式網站手機預覽

使用http-server創建一個本地服務器，而後就會提供兩個ip地址，手機和電腦在同一個局域網下，就能夠輸入網址訪問了

http-server