談談響應式網站前端設計

來源:互聯網
上載者:User

  一段時間之前我對響應式的概念還是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在前端看起來的確很酷,對使用者的友好性也足夠強,但大量的請求對伺服器並不友好,可能會使伺服器的實際負載大大下降。總之還是一句話,按實際需求來解決問題,架構並不是萬能的。

  來源:維特部落格投稿,原文連結。



相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。