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

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

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

1.布局

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

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

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

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

2.媒體

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

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

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

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

HTML：

CSS：

3.字體

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

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

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

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

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

機，平板設(shè)備的暴增，直接促進了移動互聯(lián)網(wǎng)的大潮來襲，互聯(lián)網(wǎng)迎來了更多的變革，包括web前端行業(yè)也是，現(xiàn)在變?yōu)橐苿觲eb前端開發(fā)了，有多少人迎風(fēng)倒下，又有多少人經(jīng)受了這場革命的洗禮。這次教大家如何為自己網(wǎng)站添加響應(yīng)式，快速抓住移動互聯(lián)網(wǎng)用戶。

流行的有某適配，如果你愿意每年支出高額的費用的話，這里介紹的是一個屌絲如何為網(wǎng)站添加響應(yīng)式，響應(yīng)式實現(xiàn)原理非常簡單：就是通過css3 media query技術(shù)通過瀏覽器窗口寬度的判斷，來調(diào)整合適的布局。

1，在網(wǎng)站head區(qū)間里面添加

2,在head區(qū)域添加

3，書寫css代碼

/*當(dāng)寬度為640的時候的樣式*/

@media only screen and (max-width:640px) {

}

/*當(dāng)寬度為480的時候的樣式*/

@media only screen and (max-width:480px) {

}

書寫css代碼需要你有一些css基礎(chǔ)，可以上w3school學(xué)習(xí)下，切圖網(wǎng)開發(fā)了一款用于快速響應(yīng)式布局的css框架——快切，它包含了很多具有響應(yīng)式的組件構(gòu)成，基于它可以快速完成響應(yīng)頁面的搭建。

http://kuaiqie.qietu.com

如果你對web前端技術(shù)感興趣，加我們微信：qietuwang

套模板不僅僅帶后臺（SiteServer CMS），而且還帶模板使用說明手冊的。不僅僅可以下載到模板，還能下載到整個后臺，本地直接配置起來就可以使用。

1、企業(yè)站模板一

在線瀏覽地址：http://templates.siteserver.cn/medraut/index.html

GitHub下載地址：https://github.com/siteserver/template-medraut

這是一套響應(yīng)式的企業(yè)網(wǎng)站，適合企業(yè)、公司、或者產(chǎn)品型公司。分類展示，信息展示、增加網(wǎng)站的互動性。跟Banner大圖對應(yīng)起來，整個網(wǎng)站展示方面可以做的非常絢麗多彩。

2、門戶站模板

在線瀏覽地址：http://templates.siteserver.cn/girish/index.html

GitHub下載地址：https://github.com/siteserver/template-girish

這一套自適應(yīng)的站長模板，這套模板，我們會發(fā)現(xiàn)它雖然模塊不少，有評論、有注冊登錄、有搜索、有文章排行、專題等模塊，但它的結(jié)構(gòu)還是比較簡單的，模板頁面數(shù)量少，首頁、欄目頁、文章內(nèi)容頁，欄目頁還跟首頁結(jié)構(gòu)一樣。

3、企業(yè)站模板二

在線瀏覽地址：http://templates.siteserver.cn/batraz/index.html

GitHub下載地址：https://github.com/siteserver/template-batraz

這是一套響應(yīng)式網(wǎng)站模版，適應(yīng)于互聯(lián)網(wǎng)、企業(yè)、媒體、產(chǎn)品型公司以及各種企業(yè)集團網(wǎng)站模板所有圖片在手機端都進行過處理，而響應(yīng)式網(wǎng)站不同設(shè)備內(nèi)容源碼是一樣的。因此，你不得不擔(dān)心響應(yīng)式網(wǎng)站在移動端的速度以及流量消耗，我們采用圖片處理技術(shù)后，在手機上會只加載尺寸更小的圖片。

4、大學(xué)官網(wǎng)模板

在線瀏覽地址：http://templates.siteserver.cn/albrecht/index.html

GitHub下載地址：https://github.com/siteserver/template-albrecht

這是一套學(xué)校模板，適用于各類大學(xué)、綜合院校，當(dāng)然刪減一些欄目，一樣適用各個中小學(xué)網(wǎng)站。同樣作為一套自適應(yīng)的學(xué)校模板，這套模板包含了學(xué)校主頁、院系列表頁、院系主頁、科研專題頁、教學(xué)專題頁、周邊生活專題、圖片列表頁、人員列表專頁、新聞列表頁、搜索結(jié)果頁、內(nèi)容頁等板塊。

5、博客模板

在線瀏覽地址：http://templates.siteserver.cn/scevola/index.html

GitHub下載地址：https://github.com/siteserver/template-scevola

這是一套響應(yīng)式博客模版，適應(yīng)于科技、個人博客、互聯(lián)網(wǎng)、媒體等產(chǎn)品型公司網(wǎng)站模板。所有圖片在手機端都進行過處理，簡單而又清爽的企業(yè)、博客響應(yīng)式模板。

6、單頁H5模板

在線瀏覽地址：http://templates.siteserver.cn/milenko/index.html

GitHub下載地址：https://github.com/siteserver/template-milenko

這是一套響應(yīng)式的單頁宣傳性網(wǎng)站，適合一些房產(chǎn)、或者產(chǎn)品型公司，簡單的展示一些個人或者企業(yè)信息。圖片切換板塊對圖片進行分類展示，可以保持內(nèi)容圖片的多樣性又不雜亂，增加網(wǎng)站的互動性。可以一次性展示多張圖片，跟banner大圖對應(yīng)起來，整個網(wǎng)站展示方面可以做的非常絢麗多彩。整個網(wǎng)站單頁展示，雖然看起來略顯單薄，但對應(yīng)有些企業(yè)來說非常適合，展示必要的信息，用戶瀏覽起來直觀、不繁重。

7、企業(yè)站模板三

在線瀏覽地址：http://templates.siteserver.cn/aeson/index.html

GitHub下載地址：https://github.com/siteserver/template-aeson

這是一套響應(yīng)式網(wǎng)站模版，適應(yīng)于地產(chǎn)、汽車、互聯(lián)網(wǎng)、建筑、媒體、家居、產(chǎn)品型公司以及各種企業(yè)集團網(wǎng)站模板所有圖片在手機端都進行過處理，而響應(yīng)式網(wǎng)站不同設(shè)備內(nèi)容源碼是一樣的。

8、企業(yè)站模板四

在線瀏覽地址：http://templates.siteserver.cn/kevan/index.html

GitHub下載地址：https://github.com/siteserver/template-kevan

這是一套響應(yīng)式網(wǎng)站模版，適應(yīng)于企業(yè)、汽車公司、產(chǎn)品型公司以及各種企業(yè)集團網(wǎng)站模板所有圖片在手機端都進行過處理，而響應(yīng)式網(wǎng)站不同設(shè)備內(nèi)容源碼是一樣的。因此，你不得不擔(dān)心響應(yīng)式網(wǎng)站在移動端的速度以及流量消耗，我們采用圖片處理技術(shù)后，在手機上會只加載尺寸更小的圖片。

在線咨詢

上一篇：如何使用PHP驗證和過濾HTML表單提交的數(shù)據(jù)？示例代碼剖析
下一篇：CSS width 屬性

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商