① 什麼是響應式網站響應式網站有什麼優缺點
一、什麼是響應式(自適應)網站?
響應式網站(簡稱RWD)，這個網站可以適應不同設備的訪問(手機、平板電腦、桌面計算機)，方便用戶的瀏覽，減少用戶放大縮小的操作，給用戶更好的體驗，簡單而言就是一個界面，能在不同的設備上訪問並看到不同的效果，針對的是展示形式。
二、優缺點
優點：
1、響應式網站的智能化，用戶體驗友好
隨著電腦尺寸多元化，智能設備（pad/智能手機）普及化，在當下追求用戶體驗至上的時代，之前網站普遍使用固定的寬度（960px）逐漸滿足不了現在不同設備與不同解析度需求。在高解析度電腦寬屏顯示器上，兩邊留白過多。在手機上顯示，內容顯示過小，用戶為了看清楚，首先需要放大界面，再左右拖拖界面。
建設響應式網站，最大的優勢就是具有智能化的響應設計，這種網站能夠針對用戶設備顯現端的尺寸不同，主動的調整網站的顯示方法，讓網站幾乎能夠適應所有的顯示終端，而且還能夠在瀏覽器中調整網站的寬度，讓網站不會呈現出滾動條，使用戶不管在任何一種顯示器上瀏覽網站，都不會呈現出布局紊亂、顯示不全、或者是出現亂碼的情況，因而用最大程度的是為用戶能夠提高網站體驗。
2、響應式網站也能節約設計開發成本
相對需要開發電腦網站、pad網站、手機網站來說，響應式網站節省設計開發成本的。建設響應式的網站，能夠讓客戶不會再用針對不同的設備而製作pc版網站，或者是手機版的網站，建設一個響應式的網站，花一份的錢，就能獲得兩種網站的體會，最終實現一站多用的作用效果，從後期維護角度來說，再不需要分別維護pc界面、pad界面、移動界面，專心維護一個網站即可，從而到達節約網站建設優化本錢。
3、響應式網站更利於優化
響應式建站相比傳統網站來講要簡練得多，且應用多媒體的環境下，對搜索引擎的抓取也是異常友好的，是以網站優化起來加倍輕松。在PC端於移動端上的推廣也不在需要分開優化推廣，只需要做好一個便能得到效果。
由於響應網站在不同終端有友好的界面展示效果，用戶可以與網站一直保持聯系，比如URL不變積累分享；通過單一的URL地址手機所有的社交分享鏈接最佳化搜索引擎。搜索引擎也在變得越來越聰明，它們足夠智能可以完成移動網站和桌面網站的鏈接。Google也建議優先採用響應式設計，因為無論是什麼網頁版本都是相同的HTML、相同的內容，Google最容易處理。
不同設備上的地址都一致,不像以前,不同的設備有不同的地址。這樣可以搜索優化,讓谷歌網路爬蟲更容易找到你的網站,對網站的改變,可以更快速的在搜索引擎的結果中得到更新，大大加快了網站收錄的速度。
缺點：
1、 響應式網站載入需要一定的時間
由於響應式頁面是同時下載多套CSS樣式代碼，可能在手機上就下載PC、Pad的冗餘代碼，導致文件變大，影響載入速度。還有一些圖片並沒有根據設備調整到適宜的大小，而這正是導致載入時間加倍的原因。
2、響應式網站在優化搜索引擎時
關於響應式Web設計，為搜索引擎確定關鍵字並不是一件簡單的事情。因為相比一般桌面用戶，移動用戶多數採用不同的關鍵字，修改標題和其他事項都比較困難。
3、響應式網站影響Google的排名
如果響應式網站僅僅根據移動內容，它可能會影響到網站的Google排名。由於Google不支持這樣的網站，它不會對你的網站進行索引。
4、做響應式網站所耗的時間很多
如果企業計劃想把一個現有網站轉化成響應式網站，可能耗時更多。如果企業真的想要一個響應式網站，建議企業最好從草圖開始設計。
5、對低版本瀏覽器兼容性不友好
對於老版本瀏覽器支持不好，這是一個致命的問題。老版本瀏覽器上打開響應式網站會經常出現圖片顯示不全，排版錯亂等情況。
② 什麼是響應式web設計
響應式Web設計是在開發和設計網站過程中產生的一種方式，它的目的是讓內容布局能隨用戶使用顯示器的不同而變化。再明確點說，這種設計概念，就是讓原本1292像素寬，4欄的內容，能夠很好地顯示在1025像素寬的用戶屏幕上，同時還能自動簡化成2欄。當然，讓它很好的適應智能手機和其他種類電腦的屏幕也就成了水到渠成的事了。這種特殊的設計形式就被成為「響應式Web設計」。
響應式Web設計的優點：可以兼容所有尺寸的屏幕，隨著手持設備（手機）屏幕尺寸繁多，也有很好的兼容性；而且開發一次，pc版和觸屏版，手機版融合為一；
響應式Web設計的缺點：對前端工程師要求比較高，它的屏幕兼容要求前端工程師對各種瀏覽器差異性了解比較多，對於大數據展示的門戶站點，如果用同一頁面，即時瀏覽器不崩潰，在手機上一個頁面，很難滑到最底部，帶來操作是十分不方便的，觸屏版和手機版對優質信息展示不足。
綜合優缺點：響應式Web設計在企業站點，微型或者小站還是可以用的，對於大中型站點不合適（尤其大信息量展示的）。
③ 什麼是響應式網頁設計使用了哪些技術有什麼特點
響應式web設計(responsive
web
design)的理念是：
頁面的設計與開發應當根據用戶行為以及設備環境(系統平台、屏幕尺寸、屏幕定向等)進行相應的響應和調整。具體的實踐方式由多方面組成，包括彈性網格和布局、圖片、css
media
query的使用等。無論用戶正在使用筆記本還是ipad，我們的頁面都應該能夠自動切換解析度、圖片尺寸及相關腳本功能等，以適應不同設備；換句話說，頁面應該有能力去自動響應用戶的設備環境。響應式網頁設計就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。這樣，我們就可以不必為不斷到來的新設備做專門的版本設計和開發了。
④ HTML5怎麼製作響應式網頁
1.調整視口
代碼實例：
<!DOCTYPEhtml>
<head>
<metacharset="UTF-8"/>
<title>布局之路-移動端開發實例</title>
<metaname="viewport"content="width=device-width,user-scalable=no"/>
<linkrel="stylesheet"type="text/css"href="css/reset.css"/>
</head>
<body>
<divclass="wrap"></div>
</body>
</html>
代碼解析：由於使用不同設備打開網頁時，寬度均有所不同，所以不能講視口設置為固定值，應當為width=device-width,即將視口設置為當前設備的寬度。
2.確定設計圖的最小字體
瀏覽器（部分）能夠顯示的最小字體未12px，當移動端頁面寬度為320px時，要保證最小字體為12px，那麼在1080px的設計圖中，最小字體應當為42px。
代碼實例：
<styletype="text/css">
html{
font-size:42px;
}
</style>
3.浮動布局
各個區塊都是浮動的，不是固定不變的。為了能自適應各個窗口。
代碼實例：
.main{
float:left;
width:70%;
}
.box{
float:left;
width:60.93%;
font-size:1.71rem;
text-align:center;
line-height:4.64rem;
}float浮動的好處就是，如果寬度不夠放置下這個元素，元素會自動滾動到下方。
4.通過媒介查詢，為不同設備載入相應樣式
有條件應用樣式：
<style>
@mediaalland(min-width:500px){...}
@media(orientation){...}
</style>
代碼解析：
第一行媒體查詢代碼指的是：為寬度大於等於500px的設備設置樣式。
第二行媒體查詢代碼指的是：為縱屏狀態（可見區域大於或等於寬度）下的移動端設備設置樣式。
有條件的載入樣式表：
<head>
<linkrel="stylesheet"href="wide.css"media="screenand(min-width:1024)"/>
<linkrel="stylesheet"href="mobile.css"media="screenand(max-width:320)"/>
</head>
代碼解析：
第一行媒體查詢代碼指的是：為寬度大於等於1024px的設備，載入wide.css文件。
第二行媒體查詢代碼指的是：為寬度小於等於320px的設備，載入mobile.css文件。
5.使用百分比和rem替換px
除了布局和文本，"自適應網頁設計"還必須實現圖片的自動縮放。
代碼效果對比：
/*使用固定像素*/
.box{
float:left;
width:658px;
font-size:72px;
text-align:center;
line-height:195px;
}
/*使用百分比和rem*/
.box{
float:left;
width:60.93%;
font-size:1.71rem;
text-align:center;
line-height:4.64rem;
}
代碼解析：
水平方向的值，將具體像素調整為百分比。百分比的計算是根據父級的內容區寬度進行計算的。
例如，父級寬度為1080px， 子級元素為197px，那麼子元素轉換為百分比為：197/1080*100%=18.24%。需要注意的是百分比根據父級計算，當標簽結構級別不同時，計算公式中的「分母」也有所不同，在開發時這個地方很容易出現問題，請務必注意。
垂直方向的值，將具體像素調整為rem，與水平方向相比，垂直方向的計算就比較簡單。例如，行高為195px，HTML標簽當前的字體大小為42px，將行高轉換為rem單位，即195/42= 4. 64rem。
⑤ Dreamweaver中響應式網頁代碼如何寫
默認一個固定寬度為980px的網頁，當瀏覽器窗口比980px小的時候，這個布局就變為100%比寬度的液態布局，而不是固定寬度。當瀏覽器窗口再縮小於700px的時候，我們就隱藏側邊欄。當窗口小於480px的時候，橫向導航條隱藏，換成點擊下拉效果的導航條。
如上圖，從左至右依次為移動版本—>平板電腦—>桌面瀏覽器的效果。
1、響應式網頁結構
首先，我們先來看下上面案例展示的html結構，如下圖所示：
可以說這是一個很典型的博客模版結構。一個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="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
如果你的網站頁面中用了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的設計思路。這個是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%
注意這里我們用到了%，使得頁面是一個流體布局。
（2）、當瀏覽器視圖寬度為小於等於700像素時，視圖指定#content和#sidebar的寬度為自適應並且清除浮動，使得這些容器按全寬度顯示。
#content { width: auto;float: none;margin: 20px 0;}
#sidebar { display:none; width: 100%; margin: 0; float: none; }
容器寬度繼承了上面94%的寬度，這個時候我們設定內容寬度為自動，使其填滿外部的wraper容器。並清除其浮動樣式。這個時候的瀏覽的頁面，可以權衡下右邊側欄的重要程度，如果覺得有必要繼續在頁面中顯示，我們可以清除其浮動，並把寬度也設為100%，這樣就在content這個容器下顯示。但馬海祥覺的一般情況下，在這么小的瀏覽窗口中，用戶只想看到最主要的內容，右邊側欄成為了一個補助模塊，那麼可以直接把它隱藏掉。這樣可以減少頁面的高度。
（3）、當瀏覽器窗口小於等於480px的時候，一般這個就是iPhone的橫向寬度。就要將#header元素的高度設置為自適應，將h1的字體大小修改為24像素並隱藏側邊欄。
首先我們設計webkit內核瀏覽器下禁用文字大小調整，代碼如下：
html { -webkit-text-size-adjust: none; }
其次就是代碼的轉換了，如下圖所示：
其實在480px寬度下的時候，整體框架布局已經不用設置，馬海祥認為我們應該考慮得更多的是怎麼把一個良好的頁面布局展示給用戶。而在這個模式下，如果導航條有很多選項的時候，就會相互堆疊換行，那麼這里我們設計成點擊出下拉菜單形式，如下圖所示：
這里我們首先考慮在小設備窗口下header太高已經占據了大半的屏幕顯示，所以這里我們重新設定下header的高度，能完整呈現出這個站點logo就可以了。在480px小設備窗口下瀏覽，頁面內容會很長，這個時候我們要在底部加個返回頁面頂部的按鈕。
⑥ web響應式網站怎麼做
Step1：信息架構，確定內容策略。
根據產品定位和用戶分析，交互設計師確定站點信息架構。（信息架構呈現方式有很多種，這不是本文重點，不詳述）。
這時候可以明確這個產品有多少頁面，每個頁麵包含多少內容，內容優先順序是什麼。很多產品包含N多頁面，每個頁面一一考慮響應式設計容易造成混亂且成 本巨大。所以下一步重要工作是分析頁面類型把頁面歸類。以玩客為例，可以把10多個頁面分成三類：列表類頁面、詳情類頁面、操作類頁面。
Step2：響應式移動框架
先說下為什麼第二步要先設計移動框架。移動優先是移動互聯網浪潮下應運而生的理念，由Luke Wroblewski最早提出。移動優先並不是指移動更重要，響應式設計理念里設備是同等重要的。它是指優先設計手機端的體驗，有三個原因：
手機讓設計專注，強迫你想清楚什麼信息是最重要的。因為手機屏幕小，每屏呈現的內容少；觸屏手機使用手指操作而非滑鼠這樣的精密設備來操作，對操 作有更高要求；手機使用場景更加豐富，很多場景用戶是缺乏耐心的，比如當你排隊看電影正在找手機上的電子票，馬上排到你了翻半天卻遲遲找不到那張票這是多 么令人崩潰的事情。
手機許多特性讓設計更強大。手機上的語音輸入、地理位置定位、豐富的手勢操作、越來越多感測器，手機交互比PC擁有更多可能性。從手機開始設計，讓你更早地思考如何發揮這些特性。
手機正在迅猛增長。手機即將超越PC，成為最主流的上網方式，這個趨勢是不可逆的。
從移動開始做設計對習慣了PC環境的設計師可能是一種挑戰，思考方式工作習慣都被迫做出改變。但這種改變必須去適應，因為用戶習慣在改變。
回正題，上一步已經把頁面歸類並確定每個頁面內容優先順序，現在接著分析每種類型頁面的導航、主體內容等框架結構，最終得出一份框架結構表。從玩客框 架結構看出，全局導航是所有頁面公共的，局部導航只有列表類頁面才有，詳情類頁面都有一個「頁面主人」信息，而關聯導航不是每個頁面都有。
Step3：響應式設計框架
根據手機端的框架拓展出平板和PC端框架。這是復雜產品實現響應式設計的關鍵步驟，它是讓眾多頁面有條理地響應起來的基礎。第一件事情是確定響應式 模式，即從手機到平板到PC，導航怎麼變化，頁面布局用哪種響應方式，根據內容優先順序如何調整模塊順序，等等。玩客在PC端以三欄布局為主，左邊欄作為局 部導航或者主人信息區，中間欄始終是頁面主體信息，當頁面需要關聯導航時統一放在右邊欄。
應式是一種設計理念與前端技術緊密結合的新興形態，鼓勵盡早進行跨職能溝通協作。交互確定響應式框架和柵格系統後，其他角色就可以同步開展工作 了。前端開始介入完成柵格和框架搭建，產出頁面基礎框架。視覺同步開始探索和定義視覺風格探索，制定視覺框架，產出風格關鍵詞、產品配色方案。整個過程需 要幾個角色不斷討論確定。
Step4：模塊設計
按照用戶體驗中的移動優先的原則應該先進行移動端的模塊細節設計，不過我們選擇了從PC端開始設計細節。因為PC端開發能夠充分暴露業務復雜度，項目團隊的設 計、開發、測試在PC環境下擁有成熟的工具和流程，從PC開始讓開發過程更順暢。所以個人認為移動優先是確定內容策略時應該遵循的理念，細節設計和開發過 程是否要移動優先，取決於產品定位和項目團隊情況。
響應式框架確定了頁面結構和響應模式，模塊設計這個過程開始完善所有信息排版和交互形式，這是交互設計師最熟練也是最耗時的工作。這個過程與傳統流程沒太大區別，只是心裡要不斷提醒自己，這個模塊不是只為這個設備設計，它在其它設備下會出問題嗎？
交互確定頁面模塊細節後可以抽取出產品用到的控制項、組件和公共模塊，現在視覺和前端開始做一件有別於傳統流程的事情。視覺根據前期定義的風格設計控組件和公共模塊的視覺效果，把它們拼成一個模擬的頁面，我們稱之為風格拼貼稿。前端再把風格拼貼稿里的控組件和公共模塊實現出來，統一維護一套組件規范代碼。
Step5：響應式模塊設計
PC端頁面模塊細節和風格拼貼稿完成後，剩下工作是拓展出平板和手機端的完整設計稿，前端產出全部響應式頁面代碼。進行響應式模塊設計時最需要關注的仍然是讓操作符合設備習慣，充分利用設備特性。
至此，一個全站響應式產品的頁面就陸續出來了。很多人認為響應式設計維護成本高的理由是一個頁面要同時設計多套設計稿。玩客這次經驗告訴我們，確定一套設計稿和柵格系統後再拓展出其它設備下的設計方案，工作量遠比想像中的低。
Step6：測試&討論&優化，提交開發
離大功告成還差最後一步，在真實設備下測試頁面效果，項目團隊討論並持續優化用戶體驗。
在提交開發之前需要盡早明確服務端響應（RESS） 的策略。服務端與客戶端結合是目前解決響應式頁面性能問題的最合理方案。哪些大圖片在移動設備下只需輸出小尺寸圖片？哪些內容在什麼設備下是不需要開發輸 出的？哪些可以減少輸出的數據數量？與開發團隊協作的響應式可以有效控制頁面文件大小，避免頁面成為移動設備上燒用戶流量的罪魁禍首。
測試通過後提交頁面進入開發環節。我們從可用性和可訪問性兩方面總結了一份響應式頁面測試checklist，測試要點包括但不限於以下內容。
⑦ 響應式網頁設計的優勢有哪些
1、響應式網頁設計的優勢——這個網站是獨一無二的
響應式web設計的優點是針對企業的需求進行定製，並且在網路中沒有重復的web站點，因此具有獨特性，使用戶不會體驗到審美疲勞。
2、響應式網頁設計的優勢——網站結構合理，易於優化
在模板構建過程中，很多用戶片面關注網站的創意，往往忽略網站的架構，導致後期優化困難。定製網站擁有專門的技術團隊，確保優化後的創意企業，充分吸引目標客戶的消費。
3、響應式網頁設計的優勢——網站可擴展性強
責任型網站建設具有擴展性，模板網站功能基本固定，升級難度較大。自定義網站的擴展功能更加方便。通過找到一個技術團隊來修改代碼，您可以快速滿足企業的業務需求。
4、響應式網頁設計的優勢——可以滿足更多的系統功能
響應式網站可以滿足更多的系統功能，如餐飲網站需要訂餐服務，一般網站無法滿足，所以可以定製專門開發的訂餐系統。
5、響應式網頁設計的優勢——兼容所有設備
基於最尖端的HTML5技術，智能跨平台網站解決了手機和其他移動終端屏幕尺寸、屏幕解析度不一致、瀏覽器差異化等三大移動終端適配問題，適應全球5000多台移動設備。
6、響應式網頁設計的優勢——多終端視覺效果統一
H5響應網站可以自動檢測設備屏幕的大小，並自動調整網站的內容和布局，使網站在任何設備上都有良好的顯示效果。
7、響應式網頁設計的優勢——高端氛圍，良好的用戶體驗
響應式web設計的優點可以突破移動終端和計算機終端的限制。不需要在不同設備之間切換，可以看到相同的布局，可以提高用戶體驗，這是企業所喜歡的。
8、響應式網頁設計的優勢——性價比高，開發、運維成本低
你不需要為不同的設備開發不同版本的網站或應用程序。網站內容的實時更新不僅可以降低網站開發成本，還可以節省大量的後期維護的人力和時間成本。
總之，響應式網頁設計的優勢在於它可以幫助實現一站式的多功能想法。這種基於網格布局和CSS3的移動網頁設計可以使網頁對屏幕的變化做出響應，提高用戶體驗。資料庫的管理也給網站管理員帶來了更多的便利。後續將會有更多關於ui設計中各個分類的設計技巧與資訊，可以點擊本站其他文章進行學習。
⑧ 做響應式web 頁面怎麼設計
響應式Web設計的方法
介紹完響應式Web的背景和概念之後，是時候該介紹具體的實現方法了，其實響應式Web設計的方法很簡單，就是利用CSS3的媒體查詢Media Queries和Viewport來解決問題的。
首先我們一起來看看Media Queries，這里我只會對其做一個簡單的列舉介紹。
通過媒體查詢的設置，我們可以根據屏幕寬度、屏幕方向等各個屬性來載入不同場景下不同的CSS文件來渲染頁面的視覺風格。具體的使用方法有以下兩種：
1、通過link標簽：
<link rel="stylesheet" type="text/css" media="screen and (max-width: 479px)" href="testcssbywidth1.css" />
示例代碼代表當當前屏幕寬度小於479px的時候，載入testcssbywidth1.css文件來渲染頁面。
2、CSS中直接設置：
@media screen and (max-width:479px) {
/* 具體的CSS屬性設置 */
}
對於Media Queries的一些常用屬性，只對常用的幾個做一個簡單列舉說明，其他的屬性請各位自行查閱相關資料：
width：描述終端設備顯示區域的寬度，接受max/min的前綴；
height：描述終端設備顯示區域的高度，接受max/min的前綴；
device-width：描述終端設備屏幕的寬度，接受max/min的前綴；
device-height：描述終端設備屏幕的高度，接受max/min的前綴；
orientation：描述終端設備處於橫屏還是豎屏的狀態，取值分別為：landscape/portrait。
當我們調整瀏覽器大小的時候，上面通過媒體查詢屬性的操作就可以完成響應式Web設計的工作，但是這卻不能滿足移動終端的瀏覽器，因為移動瀏覽器默認頁面是為寬屏幕設計的，所以會把他縮小來適應小屏幕，但是終端設備卻無法識別正確的寬度，所以光靠媒體查詢是解決不了移動終端設備的響應式Web設計的
⑨ html5 怎麼製作響應式網頁
步驟1 創建空白的HTML 5模版
首先，我們創建一個空白的模版，代碼很簡單，如下所示：
復制代碼
步驟2 增加HTML 5新標簽 HTML 5中新增加了不少標簽，如：
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
在頁面模版中，我們需要確保每個區域都能正確地對齊，因此需要使用HEADER、 NAVIGATION、 CONTENT、 SIDEBAR和Footer這些標簽。代碼如下所示：
復制代碼
讀者可能留意到這里使用的div id=」wrapper」，這個是稍候用來做meida query的時候調整全局CSS樣式調整用的 步驟3 往HTML 5標簽中增加代碼
1）首先往標題中增加如下代碼：
Simple HTML5 Template
復制代碼
2）往導航標簽中添加如下代碼，這樣很方便地構件了一個簡單的頁面分類導航：
Home About Parent Page Child
One Child Two with child Child One Child
Two Child Three Child Three
Contact
復制代碼
3）使用標簽來描述每一個要展示的內容實體,比如要展示的是多篇文章列表,其中的每一篇文章的具體內容就可以使用標簽了。如下代碼所示：
This is a title for post
Richard KS 20th March 2013 Tutorials HTML5, CSS3
and Responsive 10 Comments Lorem
Ipsum is simply mmy text of the printing and typesetting instry.
Lorem Ipsum has been the instry's standard mmy text ever since the
1500s
復制代碼
4）添加標簽 HTML5提供的元素標簽用來表示當前頁面或文章的附屬信息部分，可以包含與當前頁面或主要內容相關的引用、側邊欄、廣告、nav元素組，以及其他類似的有別與主要內容的部分。
根據目前的規范，元素有兩種使用方法：
被包含在中作為主要內容的附屬信息部分，其中的內容可以是與當前文章有關的引用、詞彙列表等。
在之外使用，作為頁面或站點全局的附屬信息部分；最典型的形式是側邊欄(sidebar)，其中的內容可以是友情鏈接、附屬導航或廣告單元等。
代碼如下：
Categories Category 1 Category 2
Parent Category Child One Child Two
Grandchild One Grandchild Two Grandchild Three
Child Three Category 3
Text Lorem Ipsum is simply mmy
text of the printing and typesetting instry.
復制代碼
5）加上最後的標簽，代碼為：
Copyright@ 2013 HTML5.com Privacy Policy - About Us
復制代碼
步驟4 增加CSS樣式
首先創建一個空白的樣式，如下：
[/code] 然後在http://necolas.github.com/normalize.css/中下載這個css,然後將其內容復制到該空白的文件中代碼如下： [code]body {
font-family: arial, sans-serif;
font-size: 100%; /* best for all browser using em */
padding:0;
margin:0;
}
*, html { line-height: 1.6em; }
article img { width:auto; max-width:100%; height:auto; }
.sidebar a, article a, header a, footer a { color: #C30; }
header a { text-decoration: none; }
#wrapper {
font-size: 0.8em; /* 13px from 100% global font-size */
max-width: 960px; /* standard 1024px wide */
margin: 0 auto;
}
/* css for */
header { padding: 1em 0; margin: 0px; float: left; width: 100%;
}
header hgroup { width: 100%; font-weight:normal; }
/* css for */
nav
{ display: block; margin: 0 0 2em; padding: 0px;
float: left; width: 100%; background-color: #181919;
}
nav ul ul {display: none;}
nav ul li:hover > ul {display: block;}
nav
ul { padding: 0; list-style: none; position:
relative; display: inline-table; z-index: 9999;
margin: 0px; float: left; width: 100%;
}
nav ul:after {content: ""; clear: both; display: block;}
nav ul li {float: left;}
nav ul li:hover a {color: #fff;}
nav
ul li a { display: block; padding: 1em; font-size:
1.125em; color: #ccc; text-decoration: none;
margin: 0px; background-color: #000; border-right: 1px
solid #333;
}
nav ul li:last-of-type a {border-right: 1px solid transparent !important;}
nav
ul ul { background: #5f6975; border-radius: 0px;
padding: 0; position: absolute; top: 100%; width:
auto; float: none;
}
nav ul li:hover { background: #5f6975; color: #FFF;
}
nav ul ul li a:hover { background-color: #4b545f;
}
nav ul ul li {
float: none;
border-bottom: 1px solid #444240;
position: relative;
}
nav ul ul li a {
padding: 0.5em 1em;
font-size: 1em;
width:10em;
color: #fff;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
/* css for */
section.content { width: 70%; float:left; }
.content article { width:100%; float:left; padding: 0 0 1em; margin: 0 0 1em; border-bottom: 1px solid #ddd; }
article .entry { clear:both; padding: 0 0 1em; }
h1.post-title { font-size: 1.8em; margin:0; padding:0;}
.entry.post-meta { color: #888; }
.entry.post-meta span { padding: 0 1em 0 0; }
.entry.post-content { font-size: 1.125em; margin:0; padding:0;}
/* css for */
aside.sidebar { width: 25%; float:right; }
aside.sidebar ul { width:100%; margin: 0px; padding: 0px; float: left; list-style: none;
}
aside.sidebar
ul li { width:100%; margin: 0px 0px 2em; padding:
0px; float: left; list-style: none;
}
aside.sidebar ul li ul li { margin: 0px 0px 0.2em; padding: 0px;
}
aside.sidebar
ul li ul li ul li { margin: 0px; padding: 0px 0px 0px
1em; width: 90%; font-size: 0.9em;
}
aside.sidebar
ul li h3.widget-title { width:100%; margin: 0px;
padding: 0px; float: left; font-size: 1.45em;
}
/* css for */
footer { width: 98%; float:left; padding: 1%; background-color: white; margin-top: 2em;
}
footer .footer-left { width: 45%; float:left; text-align:left; }
footer .footer-right { width: 45%; float:right; text-align:right; }
復制代碼
步驟5 為移動應用使用@media query查詢 為了進行響應式設計，最佳的方案是使用@media query去進行查詢，在上面的CSS代碼中添加如下代碼：
/* ipad 768px */
@media only screen and (min-width:470px) and (max-width:770px){
body { background-color: red; } #wrapper { width:96%; font-size: 0.6875em; }
section.content, aside.sidebar { width:100%; }
}
/* iphone 468px */
@media only screen and (min-width:270px) and (max-width:470px){
body { background-color: yellow; } #wrapper { width:96%; font-size: 0.6875em; }
section.content, aside.sidebar { width:100%; }
}
復制代碼
步驟6 增加jquery,modernizer和html5shiv到標簽中 這里推薦使用Modernizr 和html5shiv，它們都是一個能在多種瀏覽器中通過運行各種腳本兼容運行支持大部分HTML 5標簽的插件。我們將它們和jQuery庫放在標簽前，代碼如下：
0
復制代碼
⑩ 怎麼設計響應式WEB
開始第一篇。老規矩，先無聊的談論天氣一類的話題。十一長假，天氣也終於開始有些秋天的味道，坐在屋裡甚至覺得需要熱咖啡。話說兩年前也是在國慶假 期里開始做Joomla文檔翻譯的；長假好時光，總會可以抽出一兩天，安靜的窩在家裡做做博客、學做些新東西，簡直沒有比這更舒心的事情。 說正事兒。准備在近期的幾篇里集中翻譯學習一下"響應式Web設計"的相關話題，包括概念、實踐方式、案例及觀點討論等方面。相比於從前做的文檔譯 文，這些文章篇幅要長的多(甚至要加分頁了！)，今天放上的這篇幾乎花掉了兩天的"閑暇時間"；對耐力是個考驗，努力提高嘍。廢話結束，here we go. 眼下，幾乎每個新客戶都希望他們的網站可以有專門的移動設備版本。最完美的情況吶，就是為iPhone、iPad、黑莓、Kindle……各自打造 一款——頁面解析度還必須兼容任何設備。誰知道未來5年內我們還需要為多少新發明的設備設計開發不同版本的頁面？這種瘋狂什麼時候算個頭？ 在Web設計和開發領域，很快的，我們將會無法跟上設備與解析度革新的步伐。對於多數網站來說，為每種新設備及解析度創建其獨立的版本根本就是不切 實際的；結果就是，我們將會贏得使用某些設備的用戶群，而失去那些使用其他設備的用戶。不過，或許會有另外一種方式，可以幫助我們避免這種情況的發生。 響應式Web設計(Responsive Web design)的理念是，頁面的設計與開發應當根據用戶行為以及設備環境(系統平台、屏幕尺寸、屏幕定向等)進行相應的響應和調整。具體的實踐方式由多方 面組成，包括彈性網格和布局、圖片、CSS media query的使用等。無論用戶正在使用筆記本還是iPad，我們的頁面都應該能夠自動切換解析度、圖片尺寸及相關腳本功能等，以適應不同設備；換句話說， 頁面應該有能力去自動響應用戶的設備環境。這樣，我們就可以不必為不斷到來的新設備做專門的版本設計和開發了。 響應式Web設計的概念 Ethan Marcotte曾經在A List Apart發表過一篇文章"Responsive Web Design"，文中援引了響應式建築設計的概念： 最近出現了一門新興的學科——"響應式建築(responsive architecture)"——提出，物理空間應該可以根據存在於其中的人的情況進行響應。結合嵌入式機器人技術以及可拉伸材料的應用，建築師們正在嘗 試建造一種可以根據周圍人群的情況進行彎曲、伸縮和擴展的牆體結構；還可以使用運動感測器配合氣候控制系統，調整室內的溫度及環境光。已經有公司在生產" 智能玻璃"：當室內人數達到一定的閥值時，這種玻璃可以自動變為不透明，確保隱私。 將這個思路延伸到Web設計的領域，我們就得到了一個全新的概念。為什麼一定要為每個用戶群各自打造一套設計和開發方案？和響應式建築相似，Web設計同樣應該做到根據不同設備環境自動響應及調整。 顯然，我們無法也無需使用運動感測器或是機器人技術，響應式Web設計更多需要的是抽象思維。好在，一些相關的概念已經得到了實踐，比如液態布局、 幫助頁面重新格式化的media queries和腳本等。但是響應式Web設計不僅僅是關於屏幕解析度自適應以及自動縮放的圖片等等，它更像是一種對於設計的全新思維模式。 調整解析度 不同的設備都有各自的屏幕解析度、清晰度以及屏幕定向方式，不斷被研發著的各種新設備也將帶來新的屏幕尺寸規格。有些設備基於橫屏 (portrait)，有些是豎屏(landscape)，甚至還有正方形；對於日益流行的iPhone、iPad及其他一些智能手機、平板電腦，用戶還 可以通過轉動設備來任意切換屏幕的定向方式。怎樣才能做到讓一種設計方案滿足所有情況？ 要想做到同時兼容橫、豎屏(用戶還有可能在頁面載入的過程中切換方向)，我們就必須考慮N種屏幕尺寸規格。誠然，我們可以將這些規格劃分為幾個大 類，然後為每一類做一種方案，確保該方案至少在本組中盡量具有彈性。但即使這樣，結果也將是無比焦慮的，誰知道某類設備在5年之後的佔有率是多少？而且很 多用戶甚至不去將瀏覽器的窗口最大化；類似這樣的變數，我們還要考慮多少呢？ Morten Hjerde和他的同事們對2005至2008年市場中的400餘種移動設備進行了統計(查看報告)，下圖展示了大致的統計結果： 在08年之後，更多更有代表性的新設備問世並普及了。顯然，我們不可以沿著"多方案"的思路繼續走下去；那麼我們應該怎樣做呢？