響應式網站怎麼寫

㈠ 自己怎麼做響應式網站

做響應式網站，一般可以利用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，用戶不可擴展，頁面不可縮放。

如果你是剛接觸響應式網站，建議可以藉助建站寶盒來做響應式網站

㈡ 響應式網站和移動M站在代碼上分別怎麼寫

響應式網站主要是一html結構，通過css的媒體查詢來適應設備。m站則是pc和手機兩套結構

㈢ html5怎麼製作一個響應式網頁

HTML5 製作響應式網頁，首先需要考慮是全平台適配還是只是移動端適配。這里以移動端響應式網站為例，講述如何製作響應式網頁。

1、選定基本設計尺寸，一般以1080為基準。確定響應式web設計的應用場景之後，和美工（或設計師）溝通，之前，一般需要美工出幾套主流移動設備屏幕解析度的設計圖，現在，使用流式布局以及rem等可以使用一套設計圖，以最常用的移動設備屏幕解析度為基準。

2、當美工完成設計圖之後，前端工程師的工作就開始了。這時你就可以使用PS或是FW進行切圖了。一般說來，Fireworks cs6切圖更快，但是Fireworks有時會有圖片失真的情況發生，所以，有時需要使用PS進行配合，PS有切片工具可以專門用來切圖。

㈣ 什麼是響應式網站

響應式網站大致包含五種類型：

1、背景大圖+簡單多列布局

背景大圖和簡單多列布局算的上是黃金搭檔。一方面，背景大圖可以充分吸引用戶的注意力，激發用戶的興趣，另一方面，多列布局將次級元素以簡潔、明了的方式呈現出來，更進一步讓用戶有點擊瀏覽的慾望。除此以外，使用這種布局模式的網站不僅看上去很乾凈、清爽，有足夠強勁的視覺表現力，而且還能夠突破斷點的限制，不管設備屏幕的大小，都為用戶展示充足的內容，供用戶瀏覽和探索，做到真正的響應式。盡管由於設備的差異，網站的具體布局可能會有所出入，比如使用固定寬或流體布局等。但網站總體布局模式是大同小異的，一般包括以下幾個部分：

• 導航菜單欄

• 背景大圖，附有文字標題

• 2~4個分欄，承載不同類別的信息

• 主要內容區域

• 頁腳

㈤ 如何用一簡單的CSS製作響應式HTML網頁

建議展開閱讀

新人如果想快速開發出響應式網站建議使用響應式框架Bootstrap,Foundation等等......

三個部分[Viewport][網格視圖][媒體查詢]

1.先在head裡面設置Viewport

<metaname="viewport"content="width=device-width,initial-scale=1.0">

用戶可以通過平移和縮放來看網頁的不同部分。

2.很多響應式都基於網格視圖設計

響應式網格視圖通常是12列，寬度為100%，在網頁自動伸縮

比如CSS裡面寫

*{
box-sizing:border-box;
}
[class*="col-"]{
float:left;
padding:15px;
}
.col-1{width:8.33%;}
.col-2{width:16.66%;}
.col-3{width:25%;}
.col-4{width:33.33%;}
.col-5{width:41.66%;}
.col-6{width:50%;}
.col-7{width:58.33%;}
.col-8{width:66.66%;}
.col-9{width:75%;}
.col-10{width:83.33%;}
.col-11{width:91.66%;}
.col-12{width:100%;}

這樣即可在html寫

<divclass="row">
<divclass="col-3">
<ul>
<li>標題1</li>
<li>標題2</li>
<li>標題3</li>
<li>標題4</li>
</ul>
</div>
<divclass="col-9">
<h1>2333333</h1>
<p>333333333333333333</p>
<p></p>
</div>

達到簡單的響應式效果[拖拽瀏覽器大小查看]

圖片響應式方法

div{
width:100%;
height:400px;
background-image:url('url');
background-repeat:no-repeat;
background-size:contain;
border:1pxsolidred;
}

background-size屬性設置為"contain",圖片比例會自動縮放。

3.媒體查詢主要用於針對不同的媒體類型定義不同的樣式

比如我在電腦顯示圖片1,但是在手機顯示的是圖片2

詳細可以私信我

㈥ 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、學習CSS3的基礎知識。
2、學習相關的媒體查詢，如拼圖前端框架對屏幕大小的響應方式：
@media (min-width:760px){.container{width:750px;}}
@media (min-width:1000px){.container{width:1000px;}}
@media (min-width:1200px){.container{width:1200px;}}
分別是平板、桌面、寬屏下的.container下的寬度。
3、學習下網格系統，具體可參考：http://www.pintuer.com/style/index/id/3#gridsystem
4、希望對你有幫助。

㈧ 怎麼製作一個H5響應式網站

您好，可以嘗試使用新一代響應式網站設計工具 意派coolsite360 ，簡單又專業。

意派coolsite360 特色介紹：

專業建站工具

專業建站工具是面向具有一定Html、css基礎的專業人員，可使用專業建站工具進行網站前端設計，每一個細節都可靈活掌控，並可導出符合標準的代碼進行二次開發。

模塊建站工具

模塊建站工具，創新性的採用可配置的預制模塊進行網站快速搭建，通過懸浮導航、輪播、相冊、內容列表、時間軸等數十款預制模塊，可快速搭建酷炫的響應式網站。

可視化Markdown文檔編輯器

文檔編輯器，支持可視化以及Markdown雙模式編輯，可用來編寫單篇文檔，還可通過文檔集功能，進行多篇文檔的整合，用來編寫產品手冊及幫助文檔。

㈨ 如何做一個免費的單頁面響應式網站

你可以通過下載響應式網站模板來進行搭建網站，這樣網站能夠適應各種終端設備，而且在管理和運營上，響應式網站也要方便的多。

響應式頁面的優點 1.跨平台。 在手機，pad，電腦上均有不俗的表現; 2.節省人力開發成本。 不再需要有人特地維護PC頁面，移動頁面; 3.表現力一致 在不同的平台上看到的東西都是基本一致的，會讓感覺體驗良好。