1. 介紹響應式web設計的優勢有哪些
1、對用戶友好；響應式設計可以向用戶提供友好的Web界面
2、移動頻段(Mobile Segment) 在響應式網站的幫助下，你可以獲得網站流量的全景圖。
3、積累分享；響應式Web設計可以讓你(作為網站的擁有者)通過單一的URL地址收集所有的社交分享鏈接。
4、最佳化搜索引擎；搜索引擎也在變得越來越聰明，它們足夠智能可以完成移動網站和桌面網站的連接。
5、無重定向；響應式Web設計最大的優點之一是，你不必在乎任何重定向，它包含無用戶代理定向。
6、更少維護；開發一個獨立的移動網站，會增加你的工作負擔。實際上你就擁有了兩個獨立網站。如果你有一個響應式網站，維護的成本將會很小，因為它只有一個布局，且可工作在所有類型的設備上，而這可以明顯地減少你的工作量。
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，測試要點包括但不限於以下內容。
3. 有哪些響應式網頁的設計要求
1、響應式網頁的設計要求——確定核心產品定位
雖然響應式設計可以適應不同的屏幕，但是設計師在設計時仍然需要確定產品的核心定位。需要哪些特性來給用戶更好的體驗?畢竟，在手機和可穿戴設備的小屏幕上不可能顯示太多復雜的信息。按鈕功能應該顯示在第一個屏幕上。
2、響應式網頁的設計要求——產品將涉及哪些設備
現在移動設備的大小不同了。如果我們要設計一個單一的設備區域，從時間和金錢的角度來看，這是不劃算的。因此，在設計之前，我們應該先明確產品將展示在什麼樣的設備上，然後選擇幾種常用的設備，比如手機，平板電腦，智能謹襲行電視等等。
在不同的場景下，設備的設計和交互將會祥嘩有不同的表現形式。行動電話現在的比例非常高，是一個可以產生直接效益的好工具。根據官方統計，平板電腦的比例遠遠低於手機。它僅供用戶作為瀏覽工具使用。PC端雖然到達率低於手機端，但可以顯示豐富的內容。
3、響應式網頁的設計要求——小屏幕設計
你可能認為我們應該從大屏幕設備開始，但你會發現，大屏幕上的內容被壓縮到手機中，比例失衡，畫面變得扁平。但如果你開始在手機上設計，大屏幕上可能沒有什麼大問題。可以更好地為核心產品和功能領域設計。
最後，響應式網頁的設計要求可以增強用戶對您產品的依賴感，能夠方便地在不同的設備上使用您的產品，禪缺並能保證用戶在使用時能夠更好地完成任務，從而提高產品的經濟效益。想知道更多關於平面設計的設計素材與技巧，可以點擊本站的其他文章進行學習。
4. 響應式Web設計的概念，應該怎樣做響應式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設計的
5. 四十二、移動端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）的順序。
響應式工具
為了加快對移動設備友好的頁面開發工作，利用媒體查詢功能，並使用這些工具類可以方便的針對不同設備展示或隱藏頁面內容。
演示效果
6. 響應式web音樂播放器怎麼插入歌詞
響應式web音樂播放器插入歌詞方法：
1.要先准備導入的歌詞文件。注意「音樂播物斗乎放器支持的歌詞是lrc格式」由於編碼原因，從他處直接下載的lrc文件重銷鎮命名後放入歌詞文件夾後顯示亂碼。所以，只好用文本軟體打開lrc文件，復制其中的歌詞內容，新建lrc文件。
2.從音樂播放器搜索【逝去的歌】並試聽，以【旅行團樂隊-逝去的歌】為例，文件夾會自動生成lrc。下載並安裝【ES文件瀏覽器】，將准備好的lrc打開，打開方式選罩悉文本---【ES文本閱讀器】。
3.點擊頁面的右上角的編輯圖標。然後長按屏幕，將歌詞內容全部復制。
4.用ES文件管理器打開手機內存，smartisan→music→lyirc新建文件，文件名為【歌曲名$$歌手名.lrc】。如：【逝去的歌$$旅行團.lrc】
5.新建完成後打開，再點編輯圖標，將第2步復制的歌詞粘貼並保存。保存的換向符選第二個。保存之後就可以正常顯示歌詞啦！
7. 國內優秀的響應式WEB網站有哪些
互聯網時代，網頁這種東西是不可或缺的，也是視覺設計師還有程序員們一直在努力的方向，一個適用性良好，美觀的網站，總能得到更多的關注。網頁從靜態的到動態，再從動態到如今的響應式Web網站，這都是網頁設計的進步。
總而言之，現在的響應式Web可以說是大勢所趨，是現在的潮流也是未來網頁發展的趨勢，畢竟這種良好的交互性，是非常棒的。
8. 什麼是web響應式網站
響應式Web設計(Responsive Web design)的理念是：
頁面的設計與開發應當根據用戶行為以及設備環境(系統平台、屏幕尺寸、屏幕定向等)進行相應的響應和調整。具體的實踐方式由多方面組成，包括彈性網格和布局、圖片、CSS media query的使用等。無論用戶正在使用筆記本還是iPad，我們的頁面都應該能夠自動切換解析度、圖片尺寸及相關腳本功能等，以適應不同設備；換句話說，頁面應該有能力去自動響應用戶的設備環境。響應式網頁設計就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。