您現在的位置: 网站首頁 / 網站建設 / 正文

談談響應式網站前端設計

作者: admin 发布: 2015-6-4 14:17:21 分类: 網站建設 閱讀: 次 查看評論

  响应式网站 Bootstrap 网站优化 移动站点

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

  注:相关網站建設技巧阅读请移步到建站教程频道。

  來源:SEO搜尋引擎優化 - SEO自學網 轉載注明出處!

? 上一篇下一篇 ?   本文關鍵詞: 響應式網頁設計  

評論列表:

站長SEO學院
第一節:百度搜索引擎工作原理
第二節:建設對搜索引擎友好的站點
第三節:如何進行網站內容建設
第四節:整體優化、結構優化、網頁優化
第五節:移動搜索-明確移動搜索優化標准
百度SEO資料文檔
百度搜索引擎優化指南2.0
百度移動搜索優化指南2.0
網站分析白皮書(站長版)
移動站點該如何優化
建設對百度友好的站點
百度搜索引擎網頁質量白皮書
石榴算法-綠蘿算法-冰桶算法
新搜索時代下的優化策略
更多百度SEO資料文檔
站長推薦
DIV+CSS布局實例教程-Web標准
网站SEO優化常见问题汇总
SEO優化推广方案该如何写
SEO優化方案步骤
影響網站關鍵詞排名因素總結
影響谷歌搜索引擎排名的因素調查
手機移動端站點適配優化
最近發表