這事我自己干過，直接開始實(shí)操。今天想說說在上海搞響應(yīng)式官網(wǎng)踩的那些坑。

第一步：傻了唧直接上手

找了個(gè)開源的響應(yīng)式模板，信心滿滿開始塞內(nèi)容。公司介紹、產(chǎn)品圖片、聯(lián)系方式，咔咔一頓往上堆。電腦上瞅著還行，美滋滋發(fā)客戶預(yù)覽了。結(jié)果人家用手機(jī)打開一看：排版亂得像被車碾過，電話號(hào)碼擠成一團(tuán)，產(chǎn)品圖直接懟到屏幕外面去了。

第二步：瘋狂調(diào)試手機(jī)端

趕緊抓手機(jī)回來折騰。發(fā)現(xiàn)幾個(gè)要命問題：

• 導(dǎo)航欄在手機(jī)上疊成三層漢堡包，點(diǎn)開菜單直接蓋住半個(gè)屏幕
• 產(chǎn)品展示區(qū)原本橫著排三列，到手機(jī)上豎著堆成俄羅斯方塊
• 最絕的是聯(lián)系方式表格，手機(jī)得橫過來左右扒拉才能看到完整郵箱

蹲辦公室熬到半夜改CSS。把導(dǎo)航欄拆成折疊菜單，產(chǎn)品展示強(qiáng)制改成單列滑動(dòng)。表格？直接拆成純文本分行顯示，去他媽的優(yōu)雅排版。

第三步：圖片給我整破防了

以為搞定排版就萬事大吉，結(jié)果市場(chǎng)部發(fā)來20張高清產(chǎn)品大圖。傳上去一刷新，手機(jī)端加載速度堪比蝸牛爬。眼睜睜看著用戶測(cè)試頁(yè)面的跳出率從30%飆到70%！連夜把5MB的圖全扔進(jìn)壓縮工具，裁切成三個(gè)尺寸版本：電腦用原圖，平板用中圖，手機(jī)直接上糊得媽都不認(rèn)識(shí)的縮略圖。

第四步：瀏覽器打架現(xiàn)場(chǎng)

測(cè)試時(shí)用的谷歌瀏覽器挺正常，結(jié)果老板用自帶瀏覽器的舊款華為手機(jī)打開——整個(gè)頁(yè)面像是被雷劈了。文字忽大忽小，按鈕位置飄忽不定。這才想起要搞瀏覽器兼容，捏著鼻子給某些CSS屬性加前綴，專門為IE寫了幾段補(bǔ)丁代碼。測(cè)試完只想說：某些瀏覽器早點(diǎn)入土為安！

血淚總結(jié)

• 千萬別從電腦端開始做！先畫手機(jī)版排版，再慢慢擴(kuò)到平板電腦
• 圖片壓縮不是可選項(xiàng)，是保命項(xiàng)，三種尺寸備齊最穩(wěn)妥
• 測(cè)試時(shí)把老年機(jī)、古董平板都翻出來，越破的設(shè)備越要先試
• 導(dǎo)航菜單在手機(jī)端絕對(duì)要做折疊，別學(xué)電腦端擺一排

搞完這個(gè)項(xiàng)目我算是明白了：響應(yīng)式官網(wǎng)看著簡(jiǎn)單，實(shí)際全是細(xì)節(jié)坑?，F(xiàn)在接新活前都先問客戶要十個(gè)測(cè)試機(jī)型，少一個(gè)都不簽合同！