?一段時間之前我對響應式的概念還是Bootstrap、Amaze之類的框架組件，用過幾次也不以為然，我想國內搜索引擎在提供移動搜索結果頁時還是會給移動網站加分的，卻不能像Google一樣識別響應式網站，可能還需要一段時間發展

但毫無疑問的是現在Web趨勢轉向移動優先，當然如果你用域名或者其他解決方案也不是不可以，只是響應式可能更簡單一些，發展前景也是不錯的

這兩三個星期我每天都在寫響應式頁面，借此累積了不少響應式頁面和ajax的經驗

我大致的梳理了幾個響應式頁面的重點，如果想往這方面發展或是對它有些興趣，希望能給大家一點幫助

控制大小習慣了PC頁面的前端開發者可能更加喜歡用pc來控制大小，但在響應式的頁面中出現更多的是em和rem，用它們來控制字體大小甚至是框體大小對整體的效果非常明顯

打個比方，我的字體設置是10px/20px/30px等等不同的，網站上不同的地方自然字體會有大小的差異這是必然的，如果一個頁面足夠復雜或是文字足夠多的話，這些字體的大小設置也是一個量很大的工作，不過在響應式頁面中你設計完它們并不是完事

你用手機瀏覽一下頁面會發現字體會撐的很大，甚至有個別標題撐滿了手機屏幕，這對移動端用戶的體驗影響可想而知

因此你要開始寫媒體查詢，然后發現一個頁面有幾十個字體需要設置，如果把它們在不同分辨率下一一調整你可能需要寫百句以上的css代碼，但如果你用em/rem，就能夠把工作量大大減小，同時還能夠保證字體的統一比例

關于em/rem的解釋大家可以自行搜索，網上這類教程數不勝數，實際上它們就和px一樣簡單，當我開始用之后也不過只花了幾分鐘熟悉它們

就像前面說的一樣，你也可以用它們來控制框體的大小，然后再響應式的頁面下統一縮放，當然這需要足夠多的計算

另外值得一提的是字體圖標也可以用它們來控制，具體可以參考不同“字體圖標”的官方文檔

百分比解決縮放問題的思路有好幾種，最適合新手的無疑是百分比式的布局，在關鍵的寬度設置下百分比能夠起到出乎意料的效果

box1{ width:100%;}ul{ margin:0 2%;}我并不是推崇全部使用百分比來布局，但有時候這可能會大大減少工作量，給box1寬度設置100%之后它會自動以寬度填充滿整個瀏覽器，不管你是手機PC什么分辨率，它總是有很好的表現

這時候你給box1下面的ul設置左右2%的margin也是如此，隨著瀏覽器窗口大小改變時ul的實際margin大小也會隨著變化，這么一說大家多少也都理解了百分比布局的概念

當然有時候也不會有想象中的效果，特別是在較小的分辨率上時，原來看似不錯的百分比設定會顯得很怪，因為響應式多數時候只約定寬度，長度都是由文檔和瀏覽器來決定的，這時候想要在所有的終端上都有很好的體驗就需要Media Query來解決問題

Media Query通俗的解釋就是CSS的媒體查詢功能，它既能夠準確的識別設備也能夠自己設定分辨率或者寬度，w3cshool里有Media Query的參考文檔，如果你嫌文檔太多我可以粗略的解釋一下它的工作原理

在有必要的時候你可能會給一個box設置高度，當box擁有500px高度時它可能在PC上看起來不錯，但用手機打開時就有些嚇人了，整個box充斥了頁面，里面的內容排列混亂，嚴重的影響了用戶體驗，這時候你就可以使用媒體查詢Media Query，用它單獨的為不同大小的設置不同的高度，比如640/320打開時box時就分別處于300/200px的高度，這樣看起來就不錯了

大家可能會想到import，實際上媒體查詢就可以這樣理解，它為不同的寬度或設備設定了類似于import的css規則，保證了實際渲染完成頁面的效果

媒體查詢也可以為一個頁面準備多個不同的CSS，當設備大小不同時使用不同的CSS文件，如果樣式文件比較大也可以考慮這種方法

說說框架我見到過和實際使用的前端框架中，不少都是富前端類型的設計，并不建議新手前端盲目的使用框架來布局，不管框架看起來多美好

在實際的使用過程中大家可能會發現很多問題，比如類名太多太復雜（在沒有很多的css經驗時可能對約定的類名所知甚少）、樣式沖突

引入資源過多導致頁面繁重、偏離設計效果等等

就拿bootstrap來說，如果你要設計一個類似于google的搜索框就顯得很難，google類型的搜索框實際上是將一個input包含在box里面，然后在這個box里面再加上左右圖標，如果你用bootstrap來做可能會出現很多莫名奇妙的沖突，但實際上你得到了什么呢？一個圓角一個行高？還是他的百分比寬度呢？這些用css來寫只不過是幾句代碼的事

還有一些框架過度的依賴AJAX，它們也許想法很好，大量的AJAX在前端看起來的確很酷，對用戶的友好性也足夠強，但大量的請求對服務器并不友好，可能會使服務器的實際負載大大下降

總之還是一句話，按實際需求來解決問題，框架并不是萬能的

來源

維特博客投稿，原文鏈接

來源

月光博客