HTML5教程丨3個(gè)步驟讓你的網(wǎng)站變成響應(yīng)式網(wǎng)站

時(shí)間: 2016-12-05 14:25:30 點(diǎn)擊數(shù): 42246 來源: 耐思智慧

一個(gè)網(wǎng)站長得好看能吃嗎？還真能！一個(gè)“秀色可餐”的網(wǎng)站不僅能增加人們的食欲，還能讓你的營業(yè)額蹭蹭往上漲！但是，一個(gè)長得好看卻只能活在電腦端的網(wǎng)站，真的不能吃！2016年，已經(jīng)有超過80%的網(wǎng)民有在移動(dòng)端購物的經(jīng)歷，如果你的網(wǎng)站不能在移動(dòng)端“顏值在線”，就別怪客戶都被別家攬走了！

解決的辦法只有一個(gè)，就是把自家網(wǎng)站做成響應(yīng)式的。要么也可以另外開發(fā)移動(dòng)站。要把網(wǎng)站變成響應(yīng)式網(wǎng)站，給大家說三個(gè)簡單的步驟。

1.布局

在建響應(yīng)式布局的時(shí)候，最好先建一個(gè)非響應(yīng)式的布局，測試沒問題后，再把布局改成響應(yīng)式的，添加響應(yīng)式代碼和媒體查詢。

在HTML頁面的<head>和</head>標(biāo)簽之間復(fù)制以下代碼：

媒體查詢的意思是根據(jù)不同設(shè)備設(shè)置不同的布局樣式。媒體查詢?nèi)Q于網(wǎng)站布局，我們可以這樣定義：第一個(gè)，適合平板電腦橫向顯示，最大寬度為1060PX，#primary 占在其父容器寬度的67%，#senondary 占30%，再加上3%的左外邊距。第二個(gè)，適合豎向平板電腦和更小的屏幕尺寸。

編碼完成后，可以測試下布局是怎么響應(yīng)的。

2.媒體

響應(yīng)式布局是響應(yīng)式網(wǎng)站的“骨架”，媒體元素（視頻、圖像）是響應(yīng)式網(wǎng)站的“皮肉”。

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

用CSS3 來為匹配 min-device-width 條件的媒體指定替換圖像：

圖像能這樣設(shè)置，怎樣實(shí)現(xiàn)響應(yīng)式的視頻呢？

HTML：

CSS：

3.字體

CSS3 規(guī)范引入了一個(gè)新的單位叫 rem，和 em 類相似，但相對于 HTML 元素來說， rem 更易于使用。

rem 是相對于 HTML 元素的，不要忘了重置 HTML 的字體大小：

完成后，您可以定義響應(yīng)式的字體大小，如下所示：

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

零基礎(chǔ)建響應(yīng)式網(wǎng)站：http://www.daiyun360.com/design/?s=yuqiuping