1. 如何將web頁面改成響應式
第一步：檢測網頁響應式
瀏覽器打開調試模式，打開響應式設計模式，在預覽區域拖動大小范圍，如果頁面元素隨大小變化而自適應，則頁面是響應式頁面，反之，頁面是固定非響應式頁面。如圖：
第二步：編輯網頁源文件
用Dreamweaver打開頁面源文件，查看代碼樣式及文件結構，（Web頁面的視覺效果由CSS樣式表文件控制）。如圖：
第三步：植入響應式代碼
在CSS樣式表中插入以下代碼：
@media screen and (min-width:200px) and (max-device-width:640px){
/*這里寫元素的樣式*/
}
代碼解釋：這句代碼是指定了在200像素~640像素之間的終端，顯示的效果，在其他終端不顯示。
第四步：橫屏響應式設計
在CSS中插入以下代碼
@media screen and (min-width:200px) and (max-device-width:640px){
.box{ width:100%;height:auto; margin:0 auto; background:#FFFFFF;}
}
控制元素在終端的橫向展示（全屏拉伸縮放無滾動條），垂直方向用滾動條展示。如圖：
第五步：豎屏響應式設計
在CSS中插入以下代碼
@media screen and (min-width:200px) and (max-device-width:640px){
.box{ width:auto;height:100%; margin:0 auto; background:#FFFFFF;}
}
控制元素在終端的橫向展示（全屏拉伸縮放無滾動條），垂直方向用滾動條展示。如圖：
第六步：全屏響應式設計
在CSS中插入以下代碼
@media screen and (min-width:200px) and (max-device-width:640px){
.box{ width:100%;height:100%; margin:0 auto; background:#FFFFFF;}
}
控制元素在終端的橫向展示（全屏拉伸縮放無滾動條），垂直方向用滾動條展示。如圖：
7
第七步：加工檢測
響應式設計完成之後，用不同的終端全部檢測一遍，有不合格的地方繼續修改，這是程序員必須知道的也不能忽視的。
2. 做響應式web頁面怎麼設計
響應式Web設計的方法
介紹完響應式Web的背景和概念之後，是時候該介紹具體的實現方法了，其實響應式Web設計的方法很簡單，就是利用CSS3的媒體查詢MediaQueries和Viewport來解決問題的。
首先我們一起來看看MediaQueries，這里我只會對其做一個簡單的列舉介紹。
通過媒體查詢的設置，我們可以根據屏幕寬度、屏幕方向等各個屬性來載入不同場景下不同的CSS文件來渲染頁面的視覺風格。具體的使用方法有以下兩種：
1、通過link標簽：
示例代碼代表當當前屏幕寬度小於479px的時候，載入.css文件來渲染頁面。
2、CSS中直接設置：
@mediascreenand(max-width:479px){
/*具體的CSS屬性設置*/
}
對於MediaQueries的一些常用屬性，只對常用的幾個做一個簡單列舉說明，其他的屬性請各位自行查閱相關資料：
width：描述終端設備顯示區域的寬度，接受max/min的前綴；
height：描述終端設備顯示區域的高度，接受max/min的前綴；
device-width：描述終端設備屏幕的寬度，接受max/min的前綴；
device-height：描述終端設備屏幕的高度，接受max/min的前綴；
orientation：描述跡芹終端設備處於橫屏還是豎屏的狀態，取值分別為：landscape/portrait。
當我們調整瀏覽器大小的時候，上面通過媒體查詢屬性的操作就可以完成響應式Web設計的工作，但是這卻不能滿足移動終端的瀏覽器，因為移動瀏覽器默認頁面是為寬屏幕設計的，所以會把他縮小來適應小屏幕，但是終橡州運端設備卻無法識別正確的寬度，所以光梁梁靠媒體查詢是解決不了移動終端設備的響應式Web設計的
3. 什麼是響應式網頁UI設計
響應式網頁設計一直是主要趨勢，甚至早在Mashable宣布2013年為響應式網頁設計之年之前。將其與各種屏幕尺寸的移動設備的使用增加相結合，很容易理解為什麼互聯網不會停止談論它。
但是自適應網頁設計對小企業主意味著什麼?更重要的是，為什麼要關注響應式網頁設計?今天給大家分享什麼是響應式網頁UI設計?
在推廣和營銷您的業務時，設計良好的網站可能是您最有價值的資產。但是，如果您希望它真正有效，僅憑有吸引力的設計是不夠的。您的網站還需要響應。
您想要響應式網站的主要原因是，使用移動設備瀏覽互聯網的事實已經持續了幾年，並且沒有絲毫放緩的跡象。
從業務角度來看，這意味著，如果您的網站對較小的屏幕無法很好地響應，並且難以閱讀和瀏覽，則訪問者將更傾向於轉到競爭對手的網站。
簡而言之，響應式網頁設計不是奢侈，而是必需品，現在是確保您的網站具有響應能力的最佳時機。
如果您一直想知道響應式網頁設計的真正含義和重要性，那麼您來對地方了。在本文中，我們將解釋響應式網頁設計的工作原理，為什麼要考慮響應式網站，讓我們開始吧!
什麼是響應式網頁設計?
響應式網頁設計一詞是Ethan
Marcotte在2010年提出的，它是指設計網站以響應所查看的設備，從而為用戶提供無縫，最佳的用戶體驗的過程。
響應式網頁設計的核心是遵循三個主要原則：流體網格，響應式媒體和媒體查詢。在某些情況下，當設備無法確定網站的初始寬度或規模時，響應式網頁設計也會利用媒體視口元標記，從而不會觸發媒體查詢。以下是解釋的基本響應式網頁設計原則：
1.流體網格
流體網格的工作方式與其他任何設計網格一樣，它們使您能夠以美觀的方式在頁面上排列元素。但是，與傳統的網格不同，流體網格將根據屏幕尺寸進行調整，並可以適應任何寬度，因為它使用相對的測量單位(例如百分比或em單位)，而不是固定的單位(例如像素)。
2.媒體查詢
媒體查詢使您可以更加靈敏地設計響應式設計，並根據特定的屏幕尺寸進行相應調整。用外行的術語來說，網站使用媒體查詢來收集數據，以幫助他們確定屏幕的大小，然後載入適當的CSS樣式。
3.響應媒體
響應式網頁設計的第三個核心原則是響應式或靈活的媒體。鑒於現代網站使用大量的圖像，視頻和其他媒體文件，因此這些類型的內容必須響應不同的屏幕尺寸。
通常，設計人員會將圖像尺寸包括在其CSS樣式表中。但是，由於上述固定的測量單位，因此不適用於響應式設計。相反，您必須對圖像文件，視頻和其他媒體類型使用max-width屬性。為確保媒體文件不會超出其容器並根據屏幕大小很好地縮放，應將max-width屬性設置為100%。
4.視口元標記
如前所述，當媒體查詢因為設備無法確定網站的初始寬度而不會觸發時，視口元標記就會起作用。為了解決這個問題，Apple推出了viewport
meta標簽。
視口meta標簽通常將高度或寬度值的初始比例設置為1，從而解決了使用設備高度或寬度與視口尺寸之間的比率無法識別網站比例的問題。
為什麼您需要為企業網站進行響應式Web設計
響應式網頁設計不僅要遵循最新的網頁設計趨勢。為您的網站採用自適應布局對您的業務有很多好處，可能會影響您的訪問量，SEO和收入。以下是您應考慮為網站考慮響應式網頁設計的五個主要原因。
1.更好的用戶體驗和網站可用性
採用響應式網頁設計的最重要原因是，您將為訪問者提供更好的用戶體驗並提高網站的可用性。如果不強制訪問者立即向各個方向滾動，捏和縮放以閱讀您的內容，他們將更傾向於在您的網站上停留更長的時間。他們將能夠輕松地從一頁導航到另一頁，並且可以輕松填寫表格或點擊號召性用語按鈕。
2.更多的移動訪問者
正如我們前面提到的，統計數據表明，全球Web流量中有一半以上來自移動設備，這意味著一旦您的網站做出響應，您就有更大的機會吸引這些訪問者。如果他們登陸您的網站，並且遇到一個即使在較小的屏幕上看起來也很不錯的網站，那麼他們就沒有理由離開，因此您的業務一定會看到來自移動設備的潛在客戶和客戶的增加。
3.更快的網站
除了響應式網頁設計之外，另一個互聯網趨勢就是網站必須快速載入。得益於流暢的網格和響應式媒體，響應式網站的載入時間要比不響應式網站更長。這導致訪問者在您的網站上花費更多的時間，從而使我們進入下一個點-轉化率。
4.提高轉換率
一旦訪問者在您的網站上花費更多的時間，您就有更大的機會將其從訪問者轉化為潛在客戶，然後轉化為訂閱者和購買者。根據研究，智能手機設備的平均轉換率比台式機轉換率高64%。這是由於擁有易於在各種屏幕尺寸上使用且載入時間更快的網站而帶來的用戶體驗改善的直接結果。
5.更好的SEO排名
最後，更好的SEO排名絕對是響應式網頁設計的五個優點之一。畢竟，如果在搜索引擎中找不到您，那麼為您的網站獲得自然流量幾乎是不可能的。根據Google的說法，自2015年4月以來，您網站的響應度是確定您的網站在搜索引擎中的顯示方式的排名信號之一。但是，Google並不是唯一推薦它的搜索引擎。網路也明確指出，構建針對所有平台優化的網站是成功實施SEO策略的關鍵。
了解什麼是響應式網頁設計，如何開始響應式Web設計
既然我們已經介紹了響應式Web設計的最重要優點，那麼讓我們討論如何入門。
1.測試您的網站是否響應
您應該做的第一件事是測試網站的響應能力。您可以使用Google的「移動設備適合性測試」之類的工具。您所要做的就是輸入站點的URL，該工具將分析您的站點並告訴您是否響應。您還將獲得有關如何確保您的網站適合移動設備的建議。
2.從響應式模板中汲取靈感
一旦您知道您的網站是否具有響應能力，就該從響應網站的示例中獲得啟發。您將確切地看到那些網站如何利用上述核心原則，以及它們如何實現其他必要的功能。
3.選擇一個響應式模板或主題
下一步是為您的網站選擇自適應模板或主題。如果您到目前為止一直在使用HTML模板，並且想要繼續使用它們，那麼有很多可響應的HTML模板可供選擇。有響應式模板需求可以跟浪知潮客服直接聯系。
4.通過這些響應式網頁設計技巧將您的網站提升到一個新的水平
在確定您的網站使用的是響應式模板或主題之後，是時候使用其他提示和技巧將其提升到一個新的水平。使用我們的指南作為起點，可以幫助您確保您的網站提供最佳的用戶體驗並具有充分的響應能力。
總結
自適應網頁設計不會很快消失。實際上，這是未來的方式，它確實具有許多優勢，這些優勢會影響任何企業主的底線。
如果您准備將您的網站提升到一個新的水平，希望本文提供的提示和技巧能為您指明正確的方向，更多知識請持續關注。
4. 四十二、移動端web開發之響應式布局
就是使用媒體查詢針對不同寬度的設備進行布局和樣式的設置，從而適配不同設備的目的。
設備的劃分情況：
響應式需要一個父級作為布局容器，來配合子級元素來實現變化效果。
原理就是在不同屏幕下，通過媒體查詢來改變這個布局容器的大小， 再改變裡面子元素的排列方式和大小，從而實現不同屏幕下，看到不同的頁面布局和樣式變化。
父容器版心的尺寸劃分
但是我們也可以根據實際情況自己定義劃分
bootstrap來自Twitter（推特），是目前最受歡迎的前端框架。bootstrap是基於HTML、CSS和JavaScript的，它簡潔靈活，使得web開發更加快捷。
中文網 官網 推薦網站
框架：顧名思義就是一套架構，它有一套比較完整的網頁功能解決方案，而且控制權在框架本身，有預制樣式庫、組件和插件。使用者要按照框架所規定的某種規范進行開發。
在現階段，我們還沒有接觸JS相關課程，所以我們只考慮使用它的樣式庫。
Bootstrap使用四步曲：
bootstrap需要為頁面內容和柵格系統包裹一個 .container 或者 .container-fluid 容器，它提供了兩個作此用處的類。
.container
.container-fluid
柵格嵌套
柵格系統內置的柵格系統將內容再次嵌套。簡單理解就是一個列內再分成 若干份小列。我們可以通過添加一個新的 .row 元素和一系列 .col-sm-* 元素到已經存在的 .col-sm-* 元素內。
列偏移
使用 .col-md-offset-* 類可以將列向右側偏移。這些類實際是通過使用 * 選擇器為當前元素增加了左側的邊距（margin）。
列排序
通過使用 .col-md-push-* 和 .col-md-pull-* 類就可以很容易的改變列（column）的順序。
響應式工具
為了加快對移動設備友好的頁面開發工作，利用媒體查詢功能，並使用這些工具類可以方便的針對不同設備展示或隱藏頁面內容。
演示效果
5. 響應式網頁的主流技術有哪些
響應式網頁的主流技術有哪些？當不同類型的終端載入web頁面或調整瀏覽器大小時，頁面會根據媒體類型或瀏覽器寬度載入不同的CSS樣式，重新設置頁面並顯示不同的內容和布局效果。流程布局是響應性web頁面的主要技術，以百分比表示。當解析度或瀏覽器寬度發生變化時，可以平滑地縮放頁面元素，避免用戶的視覺跳躍感。也可以避免傳統固定布局中的水平滾動條。流式布局也有一些缺點，屏幕大小會在小屏幕和大屏幕之間變化，同樣的布局設計不能提供良好的視覺體驗。
例如，一些文本在電腦上顯示的行寬會滿足用戶的視覺效果，但在移動端會顯得太窄，影響用戶的瀏覽。元素的大小(百分比)基於其父元素的寬度。當有許多層次的元素嵌套時，計算機就更麻煩了。移動布局還需要結合媒體查詢方法，對不同解析度設備的網頁風格響應策略進行優化，達到更好的效果。彈性布局主要以EM和REM為元素單位，而REM以HTML根元素的大小為參考進行計算，解決了百分比計算的缺陷，使網頁設計更加方便高效。只有REM不實現響應布局;它還需要結合JavaScript或媒體查詢技術。
響應式網頁的主流技術有哪些？同時，REM作為字體大小的單位，結合媒體查詢技術，可以輕松控制不同設備上字元的字體大小。彈性圖像技術可以實現圖像隨屏幕尺寸的變化而平滑過渡，適應變焦，實現響應的變化。同時，提出了大解析度和小解析度的圖像設計方案。結合媒體查詢技術，大解析度設備使用大解析度圖像，小解析度設備使用小解析度圖像，即大屏幕載入大圖像，小屏幕載入小圖像。響應式web的主流技術有利於提高web頁面的載入速度，節省存儲空間。引導框架是一個用於前端開發的開放源碼工具包。它是響應式Web設計中最流行和常用的框架。它基於HTML5、CSS3、jQuery和javascrip技術，為開發者提供了多種響應組件。它將一組CSS樣式和效果代碼封裝在不同的文件中，以便於使用。
以上就是有哪些響應式網頁的主流技術?的主要內容，如果你想了解ui設計的基本知識，並且將他們運用到您的作品中，那麼本文一定會給你有效的幫助。如果你想學習更多關於ui設計的知識或資訊等，可以點擊本站其他文章進行學習。
6. web響應式網站怎麼做
Step1：信息架構，確定內容策略。
根據產品定位和用戶分析，交互設計師確定站點信息架構。（信息架構呈現方式有很多種，這不是本文重點，不詳述）。
這時候可以明確這個產品有多少頁面，每個頁麵包含多少內容，內容優先順序是什麼。很多產品包含N多頁面，每個頁面一一考慮響應式設計容易造成混亂且成 本巨大。所以下一步重要工作是分析頁面類型把頁面歸類。以玩客為例，可以把10多個頁面分成三類：列表類頁面、詳情類頁面、操作類頁面。
Step2：響應式移動框架
先說下為什麼第二步要先設計移動框架。移動優先是移動互聯網浪潮下應運而生的理念，由Luke Wroblewski最早提出。移動優先並不是指移動更重要，響應式設計理念里設備是同等重要的。它是指優先設計手機端的體驗，有三個原因：
手機讓設計專注，強迫你想清楚什麼信息是最重要的。因為手機屏幕小，每屏呈現的內容少；觸屏手機使用手指操作而非滑鼠這樣的精密設備來操作，對操 作有更高要求；手機使用場景更加豐富，很多場景用戶是缺乏耐心的，比如當你排隊看電影正在找手機上的電子票，馬上排到你了翻半天卻遲遲找不到那張票這是多 么令人崩潰的事情。
手機許多特性讓設計更強大。手機上的語音輸入、地理位置定位、豐富的手勢操作、越來越多感測器，手機交互比PC擁有更多可能性。從手機開始設計，讓你更早地思考如何發揮這些特性。
手機正在迅猛增長。手機即將超越PC，成為最主流的上網方式，這個趨勢是不可逆的。
從移動開始做設計對習慣了PC環境的設計師可能是一種挑戰，思考方式工作習慣都被迫做出改變。但這種改變必須去適應，因為用戶習慣在改變。
回正題，上一步已經把頁面歸類並確定每個頁面內容優先順序，現在接著分析每種類型頁面的導航、主體內容等框架結構，最終得出一份框架結構表。從玩客框 架結構看出，全局導航是所有頁面公共的，局部導航只有列表類頁面才有，詳情類頁面都有一個「頁面主人」信息，而關聯導航不是每個頁面都有。
Step3：響應式設計框架
根據手機端的框架拓展出平板和PC端框架。這是復雜產品實現響應式設計的關鍵步驟，它是讓眾多頁面有條理地響應起來的基礎。第一件事情是確定響應式 模式，即從手機到平板到PC，導航怎麼變化，頁面布局用哪種響應方式，根據內容優先順序如何調整模塊順序，等等。玩客在PC端以三欄布局為主，左邊欄作為局 部導航或者主人信息區，中間欄始終是頁面主體信息，當頁面需要關聯導航時統一放在右邊欄。
應式是一種設計理念與前端技術緊密結合的新興形態，鼓勵盡早進行跨職能溝通協作。交互確定響應式框架和柵格系統後，其他角色就可以同步開展工作 了。前端開始介入完成柵格和框架搭建，產出頁面基礎框架。視覺同步開始探索和定義視覺風格探索，制定視覺框架，產出風格關鍵詞、產品配色方案。整個過程需 要幾個角色不斷討論確定。
Step4：模塊設計
按照用戶體驗中的移動優先的原則應該先進行移動端的模塊細節設計，不過我們選擇了從PC端開始設計細節。因為PC端開發能夠充分暴露業務復雜度，項目團隊的設 計、開發、測試在PC環境下擁有成熟的工具和流程，從PC開始讓開發過程更順暢。所以個人認為移動優先是確定內容策略時應該遵循的理念，細節設計和開發過 程是否要移動優先，取決於產品定位和項目團隊情況。
響應式框架確定了頁面結構和響應模式，模塊設計這個過程開始完善所有信息排版和交互形式，這是交互設計師最熟練也是最耗時的工作。這個過程與傳統流程沒太大區別，只是心裡要不斷提醒自己，這個模塊不是只為這個設備設計，它在其它設備下會出問題嗎？
交互確定頁面模塊細節後可以抽取出產品用到的控制項、組件和公共模塊，現在視覺和前端開始做一件有別於傳統流程的事情。視覺根據前期定義的風格設計控組件和公共模塊的視覺效果，把它們拼成一個模擬的頁面，我們稱之為風格拼貼稿。前端再把風格拼貼稿里的控組件和公共模塊實現出來，統一維護一套組件規范代碼。
Step5：響應式模塊設計
PC端頁面模塊細節和風格拼貼稿完成後，剩下工作是拓展出平板和手機端的完整設計稿，前端產出全部響應式頁面代碼。進行響應式模塊設計時最需要關注的仍然是讓操作符合設備習慣，充分利用設備特性。
至此，一個全站響應式產品的頁面就陸續出來了。很多人認為響應式設計維護成本高的理由是一個頁面要同時設計多套設計稿。玩客這次經驗告訴我們，確定一套設計稿和柵格系統後再拓展出其它設備下的設計方案，工作量遠比想像中的低。
Step6：測試&討論&優化，提交開發
離大功告成還差最後一步，在真實設備下測試頁面效果，項目團隊討論並持續優化用戶體驗。
在提交開發之前需要盡早明確服務端響應（RESS） 的策略。服務端與客戶端結合是目前解決響應式頁面性能問題的最合理方案。哪些大圖片在移動設備下只需輸出小尺寸圖片？哪些內容在什麼設備下是不需要開發輸 出的？哪些可以減少輸出的數據數量？與開發團隊協作的響應式可以有效控制頁面文件大小，避免頁面成為移動設備上燒用戶流量的罪魁禍首。
測試通過後提交頁面進入開發環節。我們從可用性和可訪問性兩方面總結了一份響應式頁面測試checklist，測試要點包括但不限於以下內容。