『壹』 自己怎麼做響應式網站
做響應式網站，一般可以利用meta標簽、百分比法、使用CSS3單位rem。
利用meta標簽
Meta標簽主要用來描述一個HTML網頁文檔的屬性，如作者、日期時間、網頁描述、關鍵詞、頁面刷新等，它的Description和Keywords屬性，可加入網站的關鍵字，讓網頁利於搜索引擎。
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
解釋：Viewport指用戶網頁的可視區域，content中的「width」指的是虛擬窗口寬度，上面代碼意為虛擬窗口/頁面寬度初始比例為1，最小比例為1，最大比例為1，用戶不可擴展，頁面不可縮放。
如果你是剛接觸響應式網站，建議可以藉助建站寶盒來做響應式網站
『貳』 web響應式網站怎麼做
Step1：信息架構，確定內容策略。
根據產品定位和用戶分析，交互設計師確定站點信息架構。（信息架構呈現方式有很多種，這不是本文重點，不詳述）。
這時候可以明確這個產品有多少頁面，每個頁麵包含多少內容，內容優先順序是什麼。很多產品包含N多頁面，每個頁面一一考慮響應式設計容易造成混亂且成 本巨大。所以下一步重要工作是分析頁面類型把頁面歸類。以玩客為例，可以把10多個頁面分成三類：列表類頁面、詳情類頁面、操作類頁面。
Step2：響應式移動框架
先說下為什麼第二步要先設計移動框架。移動優先是移動互聯網浪潮下應運而生的理念，由Luke Wroblewski最早提出。移動優先並不是指移動更重要，響應式設計理念里設備是同等重要的。它是指優先設計手機端的體驗，有三個原因：
手機讓設計專注，強迫你想清楚什麼信息是最重要的。因為手機屏幕小，每屏呈現的內容少；觸屏手機使用手指操作而非滑鼠這樣的精密設備來操作，對操 作有更高要求；手機使用場景更加豐富，很多場景用戶是缺乏耐心的，比如當你排隊看電影正在找手機上的電子票，馬上排到你了翻半天卻遲遲找不到那張票這是多 么令人崩潰的事情。
手機許多特性讓設計更強大。手機上的語音輸入、地理位置定位、豐富的手勢操作、越來越多感測器，手機交互比PC擁有更多可能性。從手機開始設計，讓你更早地思考如何發揮這些特性。
手機正在迅猛增長。手機即將超越PC，成為最主流的上網方式，這個趨勢是不可逆的。
從移動開始做設計對習慣了PC環境的設計師可能是一種挑戰，思考方式工作習慣都被迫做出改變。但這種改變必須去適應，因為用戶習慣在改變。
回正題，上一步已經把頁面歸類並確定每個頁面內容優先順序，現在接著分析每種類型頁面的導航、主體內容等框架結構，最終得出一份框架結構表。從玩客框 架結構看出，全局導航是所有頁面公共的，局部導航只有列表類頁面才有，詳情類頁面都有一個「頁面主人」信息，而關聯導航不是每個頁面都有。
Step3：響應式設計框架
根據手機端的框架拓展出平板和PC端框架。這是復雜產品實現響應式設計的關鍵步驟，它是讓眾多頁面有條理地響應起來的基礎。第一件事情是確定響應式 模式，即從手機到平板到PC，導航怎麼變化，頁面布局用哪種響應方式，根據內容優先順序如何調整模塊順序，等等。玩客在PC端以三欄布局為主，左邊欄作為局 部導航或者主人信息區，中間欄始終是頁面主體信息，當頁面需要關聯導航時統一放在右邊欄。
應式是一種設計理念與前端技術緊密結合的新興形態，鼓勵盡早進行跨職能溝通協作。交互確定響應式框架和柵格系統後，其他角色就可以同步開展工作 了。前端開始介入完成柵格和框架搭建，產出頁面基礎框架。視覺同步開始探索和定義視覺風格探索，制定視覺框架，產出風格關鍵詞、產品配色方案。整個過程需 要幾個角色不斷討論確定。
Step4：模塊設計
按照用戶體驗中的移動優先的原則應該先進行移動端的模塊細節設計，不過我們選擇了從PC端開始設計細節。因為PC端開發能夠充分暴露業務復雜度，項目團隊的設 計、開發、測試在PC環境下擁有成熟的工具和流程，從PC開始讓開發過程更順暢。所以個人認為移動優先是確定內容策略時應該遵循的理念，細節設計和開發過 程是否要移動優先，取決於產品定位和項目團隊情況。
響應式框架確定了頁面結構和響應模式，模塊設計這個過程開始完善所有信息排版和交互形式，這是交互設計師最熟練也是最耗時的工作。這個過程與傳統流程沒太大區別，只是心裡要不斷提醒自己，這個模塊不是只為這個設備設計，它在其它設備下會出問題嗎？
交互確定頁面模塊細節後可以抽取出產品用到的控制項、組件和公共模塊，現在視覺和前端開始做一件有別於傳統流程的事情。視覺根據前期定義的風格設計控組件和公共模塊的視覺效果，把它們拼成一個模擬的頁面，我們稱之為風格拼貼稿。前端再把風格拼貼稿里的控組件和公共模塊實現出來，統一維護一套組件規范代碼。
Step5：響應式模塊設計
PC端頁面模塊細節和風格拼貼稿完成後，剩下工作是拓展出平板和手機端的完整設計稿，前端產出全部響應式頁面代碼。進行響應式模塊設計時最需要關注的仍然是讓操作符合設備習慣，充分利用設備特性。
至此，一個全站響應式產品的頁面就陸續出來了。很多人認為響應式設計維護成本高的理由是一個頁面要同時設計多套設計稿。玩客這次經驗告訴我們，確定一套設計稿和柵格系統後再拓展出其它設備下的設計方案，工作量遠比想像中的低。
Step6：測試&討論&優化，提交開發
離大功告成還差最後一步，在真實設備下測試頁面效果，項目團隊討論並持續優化用戶體驗。
在提交開發之前需要盡早明確服務端響應（RESS） 的策略。服務端與客戶端結合是目前解決響應式頁面性能問題的最合理方案。哪些大圖片在移動設備下只需輸出小尺寸圖片？哪些內容在什麼設備下是不需要開發輸 出的？哪些可以減少輸出的數據數量？與開發團隊協作的響應式可以有效控制頁面文件大小，避免頁面成為移動設備上燒用戶流量的罪魁禍首。
測試通過後提交頁面進入開發環節。我們從可用性和可訪問性兩方面總結了一份響應式頁面測試checklist，測試要點包括但不限於以下內容。
『叄』 響應式的網站是怎麼做的啊
網站無非就是
申請域名
，空間，
解析域名
，並綁定指定空間，製作網站程序上傳至指定空間，最後還要備案！響應式只不過是
網站製作
是有所不同
『肆』 HTML5怎麼製作響應式網頁
代碼實例：
<!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,即將視口設置為當前設備的寬度。
瀏覽器（部分）能夠顯示的最小字體未12px，當移動端頁面寬度為320px時，要保證最小字體為12px，那麼在1080px的設計圖中，最小字體應當為42px。
代碼實例：
<styletype="text/css">
html{
font-size:42px;
}
</style>
各個區塊都是浮動的，不是固定不變的。為了能自適應各個窗口。
代碼實例：
.main{
float:left;
width:70%;
}
.box{
float:left;
width:60.93%;
font-size:1.71rem;
text-align:center;
line-height:4.64rem;
}float浮動的好處就是，如果寬度不夠放置下這個元素，元素會自動滾動到下方。
有條件應用樣式：
<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。
『伍』 響應式網站應該如何做優化排名
響應式網站做優化排名應該注意以下幾個方面：
1、使用新型標簽
響應式網站是新的設計風格，新的代碼風格，新的用戶體驗，新的技術，比傳統型網站更受搜索引擎喜歡。所以在選擇編寫網站代碼時，能用新的h5標簽就選擇使用。
2、做好頁面布局
響應式的特點之一就是自適應。因此在做頁面布局時，應該考慮到在各種設備上顯示的效果。做頁面的布局，主要考慮以下三個方面的問題：
主要展示的內容；
內容展示的方式；
如何充分展示在不同平台，也就是要做好自適應。
3、提升用戶體驗
網站的用戶體驗是seo中一個是很重要的因素。比如，網站內容字與字的間距適當，段落自然，閱讀舒適，文章結尾還有返回頂部的功能按鈕，有推薦閱讀等等，再比如，進入一個網站的首頁，整個頁面載入的時候不用5秒鍾，這種快速的載入速度也是提升用戶體驗的表現。
4、做好媒體文件優化
響應式網站能夠自適應圖片大小，所以即使是一張圖片，不同解析度設備可以看到圖片不同的位置，這就需要你仔細的對圖片做布局。
現在的網站基本都有圖片，很多網站還有視頻，所以，在處理這些媒體文件時，你要對其格式、大小等影響用戶瀏覽頁面的因素做優化，加快打開速度。
『陸』 響應式網站怎麼做%header
nicebox的自助建站系統吧，都是響應式網站的，操作也簡單
『柒』 響應式網站一般怎麼設計
想要設計出好的響應式的網站的話，一定要有自己的頭腦，然後進行一些個性的設計就可以了。
『捌』 響應式網站用什麼做
HTML5遵循web3規范大腕互聯響站建站一鍵製作響應式網站
『玖』 如何做好一個響應式網站
一個成功的響應型網站必然會為企業帶來更多的業務和增加銷售，但是如何做好一個響應型網站呢？
1.清楚了解企業網站建設目的
2.傳達明確的營銷信息
3.確定用戶群體
4.搜索引擎優化布局
5.持續有效的網站管理
『拾』 如何做一個免費的單頁面響應式網站
你可以通過下載響應式網站模板來進行搭建網站，這樣網站能夠適應各種終端設備，而且在管理和運營上，響應式網站也要方便的多。
響應式頁面的優點 1.跨平台。 在手機，pad，電腦上均有不俗的表現; 2.節省人力開發成本。 不再需要有人特地維護PC頁面，移動頁面; 3.表現力一致 在不同的平台上看到的東西都是基本一致的，會讓感覺體驗良好。