大陸最先出現響應式布局
網站建設這個概念還是在2013年左右,當時大陸做這種類型的網站很少。這種響應式布局網站還是從臺灣流行過來的。由于臺灣的網絡沒有墻,可以看到很多國外的創意、設計、代碼比較先進優秀的網站,從而引用的他們的設計理念,然后一步步傳到中國大陸。
近些年晨曉網也接了一些客戶要求相應式布局的案例,所以根據近幾年的經驗,想跟大家分享一下做相應式布局的感悟。
一、網站建設從簡單到復雜,再回歸到簡單。
世間萬物演變規律皆是如此,網站建設也遵循了這一條規律,何為響應式布局?最直觀的感受,就是當我們拉伸瀏覽器寬度的時候,網頁的內容會發生變化,在現在,這個是要通過css3 media query多媒體查詢技術來實現的。

響應式布局的網頁,要盡可能設計的簡單,不要有復雜的結構,這種情況作出的響應式標準效果又好的。
二、響應式網站就要做流式布局嗎?
響應式網站建設不只是采用100%的寬度來排版網頁,實際情況我們設計一個網頁的排版往往有些復雜多樣,單靠100%寬度是不行的。
目前很多項目響應式網頁都是采用的下面這行定義
<meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1, user-scalable=yes">
而本人在公司大量的項目中采用了另外一種方法
<meta name="viewport" content="width=480">
然后響應式代碼這樣寫
body{width:480px; margin:0 auto; overflow:hidden;}
然后再去調整里面元素的細節樣式,讓它在手機下更好閱讀。這是一個很好的方法,并且做出的網頁在手機下效果很好。因為它的寬度是固定的,是可控的,編碼時候效果是可以直觀看到的。
相比于第一種方法,它的寬度很不明確,需要周全的考慮每個寬度下網頁每個元素的情況,這不僅需要大量的代碼,而且實際情況是很難考慮的那么周全,響應后的效果不好。
定寬的方法我相信有部分人知道,但是沒有人敢真正用于在實際項目中,擔心它有bug,以及有bug沒有解決方案,都隨波逐流用了第一種方法,我想說,本著探究的精神,我把這種方法用在大量項目中得到佐證,可行,也遇到過bug不過都解決了。
當然,響應式后的手機端效果不如單獨設計手機端,如果客戶對效果要求比較高,我通常會建議單獨做一個pc版和webapp觸屏版