那天接了個(gè)挺急的單子，張總說他那高端建材公司網(wǎng)站看著像十年前的老黃歷，非讓我整個(gè)能鎮(zhèn)住場(chǎng)子的。我一琢磨，所謂高端不就是讓人一打開就“哇塞”嘛手機(jī)電腦還得都伺候舒服。行，擼起袖子就干，過程比預(yù)想的折騰，但還真就五步給盤活了。

第一步：跟甲方老板死磕需求

張總上來(lái)就跟我說要“大氣國(guó)際范兒”，我心想這詞兒也太虛了。直接扛著筆記本去他辦公室，當(dāng)著他面打開了十來(lái)個(gè)大牌官網(wǎng)，挨個(gè)問：“這金色邊框夠大氣不？這全屏飄雪花算國(guó)際嗎？” 逼得他指著某個(gè)石材品牌的站說：“對(duì)！就要這種大理石紋路背景！” 行了，目標(biāo)總算落地了。順手把電腦轉(zhuǎn)過去問：“您手機(jī)上瞅瞅這站？” 結(jié)果字小得他瞇眼直撇嘴——得，響應(yīng)式這錢不加也得加了。

第二步：拿鉛筆在打印紙上畫框框

回家攤開一沓A4紙，直接拿鉛筆懟著畫。先從手機(jī)屏幕那么大的框開始畫：導(dǎo)航欄縮成漢堡菜單、產(chǎn)品圖得自動(dòng)排成一列、咨詢按鈕必須懸在右下角隨時(shí)能戳。畫完手機(jī)版再畫電腦版：產(chǎn)品要六宮格鋪開、大理石紋路當(dāng)通欄背景、客戶案例得帶自動(dòng)輪播。畫廢了十幾張紙，拿手機(jī)拍下草稿微信發(fā)給張總。他語(yǔ)音回復(fù)：“第三張那個(gè)輪播圖位置再往下挪點(diǎn)！”——得，紙沒白撕。

第三步：扒拉現(xiàn)成模板硬改

本想純手寫代碼，一看張總給的死線還是慫了。連夜翻模板市場(chǎng)，專挑“響應(yīng)式”“企業(yè)風(fēng)”標(biāo)簽篩。本來(lái)相中個(gè)帶大理石背景的，結(jié)果要價(jià)三千八。心一橫選了基礎(chǔ)版六百塊的，付款前反復(fù)用手機(jī)電腦切換著預(yù)覽。下完模板倒吸涼氣：電腦版看著挺貴氣，手機(jī)版標(biāo)題居然會(huì)跑出屏幕！硬著頭皮鉆進(jìn)代碼堆，把css里max-width、media query全揪出來(lái)改，調(diào)試時(shí)瀏覽器窗口拽得我手酸。

第四步：拿假數(shù)據(jù)填出真效果

模板自帶的歐美模特圖看得張總直皺眉：“這金發(fā)美女舉瓷磚像話嗎！” 趕緊把上次拍的企業(yè)實(shí)景圖塞進(jìn)去。產(chǎn)品分類頁(yè)更坑爹，電腦顯示四排整整齊齊，手機(jī)上一滑變成歪歪扭扭兩列——原來(lái)圖片尺寸有的大有的小。蹲后臺(tái)把所有產(chǎn)品圖尺寸統(tǒng)一壓成1200×800，再傳上去總算橫平豎直了。最費(fèi)勁的是案例輪播，拖了四個(gè)真實(shí)客戶logo上去，手機(jī)端死活不自動(dòng)切換。熬到半夜才發(fā)現(xiàn)js文件里有個(gè)叫autoplay=false的參數(shù)，改了才舒坦。

第五步：拿真手機(jī)練麒麟臂

以為所有設(shè)備都測(cè)過就能收工，結(jié)果張總用他新買的折疊屏手機(jī)一打開，導(dǎo)航欄直接劈成兩半。只能借朋友手機(jī)挨個(gè)試：華為豎屏正常，橫屏產(chǎn)品圖擠成團(tuán)；蘋果點(diǎn)咨詢按鈕老是誤觸隔壁鏈接。前后改了三版方案，把所有按鈕間距調(diào)成比拇指還寬才解決。交付前突發(fā)奇想關(guān)了家里WiFi用4G流量刷網(wǎng)站，首屏加載慢得像蝸?！瓉?lái)忘了壓縮背景大理石圖，12MB壓到800KB才算完事兒。

現(xiàn)在這網(wǎng)站上線半年，張總上周還得意兮兮給我看手機(jī)，說他在工地廁所都能流暢刷案例。所以說搞高端響應(yīng)站哪用那么多玄乎概念？關(guān)鍵就是：用紙筆畫清需求、死磕模板兼容性、真機(jī)實(shí)測(cè)要命細(xì)節(jié)——當(dāng)然那步改圖改到凌晨四點(diǎn)的滋味，誰(shuí)做誰(shuí)知道了。