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

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