響應式設計：跨瀏覽器兼容性

時間 2019-11-13

原文原文鏈接

Respond.js

第一種方案也是最簡單的一種——我如今談到的是一個腳本叫respond.js，是能夠加強老版本瀏覽器理解和執行CSS3的媒體查詢。添加以下代碼就可使用它。javascript

<script type="text/javascript" src="js/respond.min.js"></script>

這樣子，瀏覽器就能夠支持媒體查詢、最小寬度、最大寬度和全部媒體類型（例如，屏幕（screen））。這個腳本有助於CSS3指令正確地執行，甚至在更加老的瀏覽器上也行。css

看起來Respond.js很容易成爲一種理想的解決方案，但對許多項目，這是一個偉大的解決方案，由於代碼是從最新的CSS3桌面瀏覽器和爲智能手機設計的全部瀏覽器讀取的。腳本的惟一目的是讓老版本瀏覽器可以理解並執行媒體查詢的CSS3指令，沒有多餘的功能。html

Modernizr

第二種解決方案就是使用Modernizr工具。正如在其官方文檔上所解釋那樣，「Modernizr是一個智能的JavaScript庫，可以檢測出本機實現新web技術的可用性，例如，基於HTML5和CSS3標準的新特性。」java

這些特性的大部分至少在一種主流瀏覽器中實現，Modernizr所作的——很是簡單——告訴你目前的瀏覽器是否實現這些特性。這是一個不可缺乏的工具，能夠經過javascript驅動功能檢測給你更好的控制體驗。web

除此以外，Modernizr建立一個JavaScript對象而且在HTML元素中增長類來鎖定你的CSS代碼。這是一種極好的解決方案，所以這樣有助於你很簡單地編寫條件式的JavaScript和CSS代碼來處理每種方案，無論瀏覽器是否支持某種特性與否。sql

Modernizr支持這些瀏覽器：IE6+, 火狐3.5+, Opera 9.6+, Safari 2+, Chrome, Mobile Safari, Android基於WebKit內核的瀏覽器，Opera手機和火狐手機（瀏覽器）。canvas

你能夠下載該庫的完整版本和根據本身的定製去實現它。然而，若是你只是須要測試瀏覽器對CSS3的兼容性，你能夠設置庫提供的各類選項並建立本身的壓縮代碼。在一個外部的js文件中粘貼這些代碼，用標籤包含在HTML文檔裏。Modernizr團隊建議在導入CSS以後才加入該庫。瀏覽器

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Your title</title> <script type="text/javascript" src="modernizr-latest.js""></script> </head> <body>Your content</body> </html>

如今你有一個JavaScript庫，代表你使用CSS3和HTML5功能獲得支持。讓頁面在瀏覽器上運行，而後使用Chrome開發工具或Firebug審查代碼。websocket

你可能看到代碼以下：session

<html class="js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase no-indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage no-borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio no-localstorage no-sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths"> .... </html>

adapt.960.js

對於第三種解決方案，咱們認爲是很是不一樣於前兩種的，尤爲是由於它並不利用CSS3和相應的媒體查詢。然而，其概念很是相似於CSS3的媒體查詢。

若是咱們單獨文件中使用CSS3，這個庫要求咱們去用多個CSS文件分開這些代碼，其中一份爲每種設備類型而準備的。該庫會解析設備的分辨率併爲特定的屏幕分辨率調用對應的CSS設計。

咱們能夠下載該庫，而後在頁面代碼中添加以下代碼行：

<script type="text/javascript" src="js/adapt.min.js"></script>

接着，複製下面代碼：

<script type="text/javascript"> var ADAPT_CONFIG = {

// Where is your CSS? path: 'assets/css/', dynamic: true, callback: myCallback, range: [ '0px to 760px = mobile.css', '760px to 980px = 720.css', '980px to 1280px = 960.css', '1280px to 1600px = 1200.css', '1600px to 1920px = 1560.css', '1940px to 2540px = 1920.css', '2540px = 2520.css' ] };

咱們能夠看到在「range」包含了一系列CSS文件，每一個CSS文件就是對應了一組分辨率，文件內包含相對應的CSS屬性，就比如，代碼是編寫在CSS媒體查詢中。

公共CSS——就是應該應用在全部的屏幕尺寸中——會被包含在不一樣的CSS文件彙總，爲了方便，咱們能夠叫此CSS文件爲master.css，像日常的CSS文件那樣引入它：

<link href="assets/master.css" rel="stylesheet" type="text/css" media="screen" />

總結

在這三種方案中，咱們應該採用哪種？它們都是有效的、合理的方案。若是你選擇應用第一個解決方案(respond.js)，你必須編寫和管理一個單獨的CSS文件，這點不像adapt.960.js，則須要多個CSS文件。最後，若是你選擇去嘗試Modernizr，將利用瀏覽器支持新的CSS3 功能，而且很容易和可靠的手段來控制或者瀏覽器沒法控制的局勢。

若是你相信在將來幾年內，老版本瀏覽器會變得可有可無了，移動瀏覽器將取代桌面瀏覽器，我相信最好使用媒體查詢和支持老版本瀏覽器可用的javascript擴展插件。

記住目前也有基於web的服務來測試響應式網站和模擬瀏覽器窗口的大小。其中有兩個方案，一是responsive.is，這個是很是容易上手的；而是studiopress.com，輸入網址後，從不一樣的角度並排地展現你的網站。

除了基於web的解決方案以外，還有應用程序，能夠直接安裝在你的我的電腦。其中，發現Opera移動模擬器 Opera Mobile Emulator，可在Mac、Linux和Windows上安裝使用。安裝後打開應用程序，將發現有一個列設備類型選擇來模擬的(不幸的是，蘋果設備除外)。

總結這篇文章，我想分享一個很是有用的在線工具來測試你的網站的兼容性:crossbrowsertesting.com。你必須選擇一個操做系統和一個web瀏覽器。經過在一系列瀏覽器截圖，使得對你的網站有了較爲完整視圖，經過這種方式，將更容易地理解你應該修改哪些元素使得你的項目徹底兼容任何平臺。

彙總

由Spy根據Annarita Tranfici的系列教程《Understanding Responsive Web Design》翻譯的有關於響應式設計的系列文章到今天爲止就是最後一篇，下面將整個系列對應的譯文列在此處，僅供參考：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。