我最近接了個(gè)活，有個(gè)九江的老板要建個(gè)新網(wǎng)站，說(shuō)手機(jī)電腦都得能用。剛開始我一頭霧水，響應(yīng)式是個(gè)啥玩意兒？聽著挺高大上，不就是讓網(wǎng)站在不同屏幕上自動(dòng)變個(gè)樣嘛我琢磨著，不就是手機(jī)窄、電腦寬，網(wǎng)站自己調(diào)整一下嗎？得去試試才行。

一、先從查資料開始

我打開電腦，到處翻教程。網(wǎng)上的帖子太多了，亂七八糟的。有些人說(shuō)用啥框架，我一瞅太復(fù)雜，直接跳過(guò)。后來(lái)看幾個(gè)簡(jiǎn)單的例子，響應(yīng)式設(shè)計(jì)就是寫代碼時(shí)加點(diǎn)花活，讓頁(yè)面大小自動(dòng)伸縮。比如手機(jī)豎屏，按鈕就放大點(diǎn)；電腦橫屏，內(nèi)容就排整齊點(diǎn)。我抄了幾個(gè)例子，搗鼓了半天，總算搞明白了點(diǎn)門道。

• 第一步：在代碼里加個(gè)叫“viewport”的東西，控制頁(yè)面的縮放規(guī)則。
• 第二步：設(shè)計(jì)布局時(shí)用百分比寬度，不讓東西固定死。
• 第三步：搞些媒體查詢，判斷屏幕大小，再調(diào)整樣式。

那老板催得急，說(shuō)九江的項(xiàng)目得趕工。我得快點(diǎn)動(dòng)手，不能紙上談兵了。

二、動(dòng)手寫網(wǎng)站代碼

我拉出一個(gè)老模板來(lái)改。先定個(gè)網(wǎng)站名字，就叫“九江風(fēng)光”，主題是旅游景點(diǎn)展示。加了個(gè)首頁(yè)，放些九江的照片和介紹。寫代碼時(shí)，我一邊敲鍵盤一邊念叨：手機(jī)上看，文字要大字報(bào)風(fēng)格；電腦上看，圖片得分欄顯示。費(fèi)老大勁調(diào)位置，結(jié)果第一次在手機(jī)上打開，圖片全歪了，按鈕壓在一起點(diǎn)不了。急得我抓耳撓腮，直接關(guān)機(jī)睡大覺(jué)。

第二天起床接著干。試了好幾種辦法，媒體查詢是關(guān)鍵，得反復(fù)測(cè)手機(jī)和電腦預(yù)覽。我把代碼拆開重寫，電腦端寬屏?xí)r，內(nèi)容分兩列；手機(jī)窄屏?xí)r，自動(dòng)堆成一列。測(cè)試時(shí)用模擬器，還拿自己的破手機(jī)和筆記本來(lái)回刷網(wǎng)站。修修補(bǔ)補(bǔ)兩天，終于順溜點(diǎn)了，按鈕大小合適，頁(yè)面不卡頓。

三、測(cè)試和調(diào)整的過(guò)程

搞定代碼后，得實(shí)戰(zhàn)測(cè)試。我?guī)е习褰o的測(cè)試賬號(hào)，在九江城里跑一圈。找個(gè)咖啡館用電腦開網(wǎng)站，效果還行；再用手機(jī)戶外刷，太陽(yáng)一曬屏幕，字體太小看不清。我立馬調(diào)大文字尺寸，適配必須覆蓋各種情況。晚上回去又折騰，朋友打電話說(shuō)用老款瀏覽器打不開，我又打補(bǔ)丁加兼容性。前后折騰一星期，才算整明白。手機(jī)上看流暢滑動(dòng)，電腦上布局整齊，老板試了直點(diǎn)頭。

這網(wǎng)站上線后反響不錯(cuò)。我突然想起去年事兒：做另一個(gè)項(xiàng)目時(shí)，被一客戶坑慘了，說(shuō)響應(yīng)式簡(jiǎn)單，結(jié)果我熬夜搞完，一分錢沒(méi)給，還拉黑我微信。那陣子我喝西北風(fēng)，老婆罵我蠢。今年再干這個(gè)九江項(xiàng)目，我學(xué)精了，簽合同收定金。生活教會(huì)我：技術(shù)活不容易，做人得機(jī)靈點(diǎn)。現(xiàn)在看著手機(jī)電腦都能適配的網(wǎng)站，心里美滋滋的，以后再接這種活就更順手！