淺談濟南網站建設響應式網站做流式布局

發表時間:2015-09-08 09:21?? 作者:銳尚?? 瀏覽: 次

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

響應式布局的網頁，要盡可能設計的簡單，不要有復雜的結構，這種情況作出的響應式標準效果又好的。

二、響應式網站就要做流式布局嗎？
響應式網站建設不只是采用100%的寬度來排版網頁，實際情況我們設計一個網頁的排版往往有些復雜多樣，單靠100%寬度是不行的。

目前很多項目響應式網頁都是采用的下面這行定義
<meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1, user-scalable=yes">

而本人在公司大量的項目中采用了另外一種方法

然后響應式代碼這樣寫

body{width:480px; margin:0 auto; overflow:hidden;}

然后再去調整里面元素的細節樣式，讓它在手機下更好閱讀。這是一個很好的方法，并且做出的網頁在手機下效果很好。因為它的寬度是固定的，是可控的，編碼時候效果是可以直觀看到的。

相比于第一種方法，它的寬度很不明確，需要周全的考慮每個寬度下網頁每個元素的情況，這不僅需要大量的代碼，而且實際情況是很難考慮的那么周全，響應后的效果不好。

定寬的方法我相信有部分人知道，但是沒有人敢真正用于在實際項目中，擔心它有bug，以及有bug沒有解決方案，都隨波逐流用了第一種方法，我想說，本著探究的精神，我把這種方法用在大量項目中得到佐證，可行，也遇到過bug不過都解決了。

當然，響應式后的手機端效果不如單獨設計手機端，如果客戶對效果要求比較高，我通常會建議單獨做一個pc版和webapp觸屏版

淺談濟南網站建設響應式網站做流式布局

相關文章/Related