如何制作一個響應式網(wǎng)頁？

時間：2022-05-29 08:18:01 | 來源：網(wǎng)絡(luò)營銷

時間：2022-05-29 08:18:01 來源：網(wǎng)絡(luò)營銷

前面我已經(jīng)在億企邦上跟大家詳細介紹了《什么是響應式網(wǎng)頁設(shè)計？》《響應式網(wǎng)頁布局的實現(xiàn)方法原理》，接下來我要為大家分享的就是如何來做一個簡單的響應式網(wǎng)頁？

總體來說，響應式網(wǎng)頁設(shè)計是一種新的網(wǎng)頁設(shè)計思路，我們需要滿足不同設(shè)備下的瀏覽模式，達到俱佳的體驗效果。所以要想做好一個響應式網(wǎng)頁，首先必須要滿足桌面各個瀏覽器版本下正常顯示頁面。其次才考慮以webkit為內(nèi)核的手機終端瀏覽器效果。由于IOS和Android瀏覽器都是webkit內(nèi)核的，這里的響應我們暫時就不考慮ie9以下版本的瀏覽器了。

我們先以相對比較簡單的博客網(wǎng)站（比如：www.mahaixiang.cn）類型為例，它默認一個固定寬度為980px的網(wǎng)頁，當瀏覽器窗口比980px小的時候，這個布局就變?yōu)?00%比寬度的液態(tài)布局，而不是固定寬度。當瀏覽器窗口再縮小于700px的時候，我們就隱藏側(cè)邊欄。當窗口小于480px的時候，橫向?qū)Ш綏l隱藏，換成點擊下拉效果的導航條。

如上圖，從左至右依次為移動版本—>平板電腦—>桌面瀏覽器的效果。

1、響應式網(wǎng)頁結(jié)構(gòu)

首先，我們先來看下上面案例展示的html結(jié)構(gòu)，如下圖所示：

可以說這是一個很典型的博客模版結(jié)構(gòu)。一個wrapper容器包含了頭部、內(nèi)容、側(cè)欄、底部。

2、Meta標簽

其次就需要我們針對移動設(shè)備加入這個meta標簽。告訴webkit內(nèi)核瀏覽器初始縮放比例為1。（很多iOS和Android的瀏覽器都是基于webkit內(nèi)核的）

<meta name="viewport" content="width=device-width; initial-scale=1.0">

IE8或者更早的瀏覽器并不支持Media Query。你可以使用media-queries.js或者respond.js來為IE添加Media Query支持。

<!--[if lt IE 8]>
　　<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
　　<![endif]-->

如果你的網(wǎng)站頁面中用了html5文檔聲明，用到了很多html5標簽，但是這些標簽在ie9以下版本是不支持的，所以我們必須引用一個html5.js文件使得這些標簽被其它低版本瀏覽器確認。

<!--[if lt IE 9]>
　　<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
　　<![endif]-->

3、媒介查詢-Media Queries

在這里億企邦就不再詳細的講正常頁面下的布局如何寫了。在此主要講解下媒體查詢media queries這個css的設(shè)計思路。這個是css3的屬性，也是我們這個響應式網(wǎng)頁設(shè)計的最重要的部分?？梢哉f是響應式設(shè)計的核心。它根據(jù)條件告訴瀏覽器如何為指定視圖寬度渲染頁面。

<link href="media_queries.css" rel="stylesheet" type="text/css">

下面我們用CSS3的媒介查詢（Media Query）特性使得網(wǎng)頁適應不同設(shè)備，即根據(jù)設(shè)備的分辨率和縮放自動重新布局。

@media screen and (max-width: 480px) {
　　這里就是重新設(shè)定一些css的屬性
　　}

（1）、當瀏覽器視圖寬度為小于等于980像素時，如下規(guī)則將會生效?；旧希視⑺械娜萜鲗挾葟南袼刂翟O(shè)置為百分比以使得容器大小自適應。

#pagwraper { width: 94%;}重新設(shè)定容器寬度為94%;
　　#content { width: 65%; padding: 3% 4%;}重新設(shè)定內(nèi)容寬度為65%;
　　#sidebar { width: 30%;}重新設(shè)定側(cè)邊欄寬度為30%

注意這里我們用到了%，使得頁面是一個流體布局。

（2）、當瀏覽器視圖寬度為小于等于700像素時，視圖指定#content和#sidebar的寬度為自適應并且清除浮動，使得這些容器按全寬度顯示。

#content { width: auto;float: none;margin: 20px 0;}
　　#sidebar { display:none; width: 100%; margin: 0; float: none; }

容器寬度繼承了上面94%的寬度，這個時候我們設(shè)定內(nèi)容寬度為自動，使其填滿外部的wraper容器。并清除其浮動樣式。這個時候的瀏覽的頁面，可以權(quán)衡下右邊側(cè)欄的重要程度，如果覺得有必要繼續(xù)在頁面中顯示，我們可以清除其浮動，并把寬度也設(shè)為100%，這樣就在content這個容器下顯示。但億企邦覺的一般情況下，在這么小的瀏覽窗口中，用戶只想看到最主要的內(nèi)容，右邊側(cè)欄成為了一個補助模塊，那么可以直接把它隱藏掉。這樣可以減少頁面的高度。

（3）、當瀏覽器窗口小于等于480px的時候，一般這個就是iPhone的橫向?qū)挾?。就要?header元素的高度設(shè)置為自適應，將h1的字體大小修改為24像素并隱藏側(cè)邊欄。

首先我們設(shè)計webkit內(nèi)核瀏覽器下禁用文字大小調(diào)整，代碼如下：

html { -webkit-text-size-adjust: none; }

其次就是代碼的轉(zhuǎn)換了，如下圖所示：

其實在480px寬度下的時候，整體框架布局已經(jīng)不用設(shè)置，億企邦認為我們應該考慮得更多的是怎么把一個良好的頁面布局展示給用戶。而在這個模式下，如果導航條有很多選項的時候，就會相互堆疊換行，那么這里我們設(shè)計成點擊出下拉菜單形式，如下圖所示：

這里我們首先考慮在小設(shè)備窗口下header太高已經(jīng)占據(jù)了大半的屏幕顯示，所以這里我們重新設(shè)定下header的高度，能完整呈現(xiàn)出這個站點logo就可以了。在480px小設(shè)備窗口下瀏覽，頁面內(nèi)容會很長，這個時候我們要在底部加個返回頁面頂部的按鈕。

最后我想再說的一點是關(guān)于彈性圖片，我們這里用到的是img { max-width: 100%; }。但是有個問題，如果圖片過大會影響其加載速度，更會造成對存儲空間的浪費。當然，這里有個響應式圖片的實現(xiàn)技術(shù)思路，大家有興趣的話可以查看《響應式網(wǎng)頁布局的實現(xiàn)方法原理》一文。