新型SEO思維就是從一個全新的層次上提升seo優化的水平,達到網絡信息最佳化的展示效果!
我叫mt4国服第一盗贼 > 網站制作 > 網頁制作 > 如何制作一個響應式網頁?

我叫mt4幻兽保卫战:如何制作一個響應式網頁?

時間:2013-09-18   文章來源:馬海祥博客   訪問次數:

我叫mt4国服第一盗贼 www.nijqb.icu 前面我已經在馬海祥博客上跟大家詳細介紹了《什么是響應式網頁設計?》《響應式網頁布局的實現方法原理》,接下來我要為大家分享的就是如何來做一個簡單的響應式網頁?

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

我們先以相對比較簡單的博客網站(比如:我叫mt4国服第一盗贼)類型為例,它默認一個固定寬度為980px的網頁,當瀏覽器窗口比980px小的時候,這個布局就變為100%比寬度的液態布局,而不是固定寬度。當瀏覽器窗口再縮小于700px的時候,我們就隱藏側邊欄。當窗口小于480px的時候,橫向導航條隱藏,換成點擊下拉效果的導航條。

如何制作一個響應式網頁?

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

1、響應式網頁結構

首先,我們先來看下上面案例展示的html結構,如下圖所示:

響應式網頁html結構

可以說這是一個很典型的博客模版結構。一個wrapper容器包含了頭部、內容、側欄、底部。

典型模版wrapper容器包含了頭部、內容、側欄、底部

2、Meta標簽

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

<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="//css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
  <![endif]-->

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

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

3、媒介查詢-Media Queries

在這里馬海祥就不再詳細的講正常頁面下的布局如何寫了。在此主要講解下媒體查詢media queries這個css的設計思路。這個是css3的屬性,也是我們這個響應式網頁設計的最重要的部分??梢運凳竅煊κ繳杓頻暮誦?。它根據條件告訴瀏覽器如何為指定視圖寬度渲染頁面。

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

下面我們用CSS3的媒介查詢(Media Query)特性使得網頁適應不同設備,即根據設備的分辨率和縮放自動重新布局。

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

(1)、當瀏覽器視圖寬度為小于等于980像素時,如下規則將會生效?;舊?,我會將所有的容器寬度從像素值設置為百分比以使得容器大小自適應。

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

當瀏覽器視圖寬度為小于等于980像素時

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

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

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

當瀏覽器視圖寬度為小于等于700像素時

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

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

首先我們設計webkit內核瀏覽器下禁用文字大小調整,代碼如下:

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

其次就是代碼的轉換了,如下圖所示:

當瀏覽器窗口小于等于480px的時候

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

響應式網頁導航的下拉菜單形式

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

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

本文為我叫mt4国服第一盗贼原創文章,如想轉載,請注明原文網址摘自于//www.nijqb.icu/wyzz/279.html,注明出處;否則,禁止轉載;謝謝配合!

相關熱詞搜索: 響應式網頁 響應式設計 網頁制作 如何制作網頁

上一篇:提高網站速度的6種網站前端優化方法
下一篇:網頁制作過程中常用的20個功能代碼

今日話題更多>

SEO研究院 更多 >>