一個網(wang)(wang)站(zhan)長得好看能(neng)吃嗎(ma)？還真能(neng)！一個“秀色可(ke)餐”的(de)(de)網(wang)(wang)站(zhan)不僅能(neng)增加人(ren)們的(de)(de)食欲，還能(neng)讓你的(de)(de)營業額蹭蹭往上漲(zhang)！但是(shi)，一個長得好看卻只能(neng)活(huo)在電腦端的(de)(de)網(wang)(wang)站(zhan)，真的(de)(de)不能(neng)吃！2016年，已經有超過80%的(de)(de)網(wang)(wang)民有在移(yi)動端購物的(de)(de)經歷，如果你的(de)(de)網(wang)(wang)站(zhan)不能(neng)在移(yi)動端“顏值在線”，就別怪客戶都被別家攬(lan)走了！

解決的辦法只有一個，就是把自家網站做成響應式的。要么也可以另外開發移動站。要把網站變成響應式網站，給大家說三個簡單的步驟。

1.布局

在建響應(ying)式布局(ju)的時(shi)候，最好先建一個(ge)非響應(ying)式的布局(ju)，測試沒問題(ti)后，再把布局(ju)改成(cheng)響應(ying)式的，添加(jia)響應(ying)式代碼和媒體(ti)查(cha)詢(xun)。

在HTML頁面的<;head>和</head>標(biao)簽之間(jian)復制以(yi)下代(dai)碼：

媒(mei)體查(cha)詢(xun)的(de)意思是根據(ju)不同(tong)設備設置不同(tong)的(de)布(bu)局(ju)樣式。媒(mei)體查(cha)詢(xun)取決于(yu)網站布(bu)局(ju)，我(wo)們可以這(zhe)樣定(ding)義(yi)：第(di)一個，適(shi)合(he)平板(ban)電腦橫向(xiang)顯示，最大寬度為(wei)1060PX，#primary 占在其父(fu)容器寬度的(de)67%，#senondary 占30%，再加上(shang)3%的(de)左外邊距(ju)。 第(di)二個，適(shi)合(he)豎向(xiang)平板(ban)電腦和更小的(de)屏幕尺寸。

編碼完成(cheng)后，可以測試下(xia)布局是怎么響應的(de)。

2.媒體

響應(ying)式(shi)布(bu)局是響應(ying)式(shi)網(wang)站的“骨架(jia)”，媒體元素（視頻、圖像）是響應(ying)式(shi)網(wang)站的“皮肉”。

下面這(zhe)段CSS代碼能讓你的網站圖像不超過顯示終端(duan)尺(chi)寸。

用CSS3 來(lai)為(wei)匹配 min-device-width 條件的媒體指定(ding)替(ti)換圖像：

圖(tu)像(xiang)能這樣(yang)設置，怎樣(yang)實(shi)現響(xiang)應(ying)式(shi)的視頻呢？

HTML：

CSS：

3.字(zi)體

CSS3 規范(fan)引入了一個新(xin)的單位叫 rem，和 em 類相似，但相對于(yu)(yu) HTML 元素(su)來說， rem 更(geng)易于(yu)(yu)使用。

rem 是(shi)相對(dui)于 HTML 元素(su)的，不(bu)要(yao)忘了重(zhong)置 HTML 的字體大(da)小：

完成后，您(nin)可以定義響應式的(de)字體大(da)小，如下所(suo)示：

完成這三步后，你就能擁有一個響應式的網站了。不過這個教程對大部分用戶來說，還是有點復雜了。如果不會程序，是不是就不能做響應式網站了呢？并不是。目前一些自助建站工具已經非常強大，以建站寶盒為代表的H5模板建站，非常適合不懂編程的小白。拖拽操作，能打字就能建站，網站做出來高端大氣，尤其適合要做營銷型響應式網站的企業。

零基礎建響應式網站：//szjicheng.cn/design/?s=yuqiuping