1、響應式網頁設計成趨勢及什麼叫響應式網頁
響應式設計的概念由著名網頁設計師 Ethan Marcotte 在2010年5月份提出，其目標是要讓設計的網站能夠響應用戶的行為，根據不同終端設備自動調整尺寸。通俗地講，響應式設計是指可以自適應屏幕寬度、並做出相應調整的網頁設計。一個網站能夠兼容多個終端(iphone、ipad、android)，而不是為每個終端做一個特定的版本，這樣就可以不必為不斷到來的新設備做專門的網站版本設計了。
2、什麼是響應式網站模板？
頁面的設計與開發應當根據用戶行為以及設備環境進行相應的響應和調整。具體的實踐方式由多方面組成，包括彈性網格和布局、圖片、CSS media query的使用等。無論用戶正在使用筆記本還是iPad，我們的頁面都應該能夠自動切換解析度、圖片尺寸及相關腳本功能等，以適應不同設備；換句話說，頁面應該有能力去自動響應用戶的設備環境。響應式頁面設計就是一個網站能夠兼容多個終端，而不是為每個終端做一個特定版本。
3、什麼是響應式網頁設計與自適應網頁設計
響應式與自適應的原理是相似的，都是檢測設備。 根據不同的設備採用不同的css，而且css都是採用的百分比的，而不是固定的寬度。
不同點：響應式的模板在不同的設備上看上去是不一樣的，會隨著設備的改變而改變展示樣式， 而自適應不會，所有的設備看起來都是一套的模板，不過是長度或者圖片變小了，不會根據設備採用不同的展示樣式。
4、怎樣做出H5響應式網頁設計
15響應式網頁設計是需要js的支撐了。首先你要熟練使用js,才能學會作出響應式的網頁。如果不會的話，建議你先去使用響應式的網站模板，先去下載幾個響應式網頁模板，根據這個模板查看他的源碼。慢慢的自己就可以設計出這個響應式網頁模板。像這類模板下載的網站有很多。比如開創著素材、單張素材。
5、響應式網頁 界面設計 多大字型大小
響應式的網頁設計，除了布局的變化以外，還有字型大小的改變。通常使用@media。比如：
h1 {
font-size: 48px;
}
@media (max-width: 767px){
h1 {
font-size: 36px;
}
}
以上的CSS可以讓網頁在設備屏幕尺寸小於768px的時候，讓h1的字型大小從原始的48px變為36px。在實際的應用中，尤其是h1、h2、h3等等這樣的大標題的字型大小設置，其實還是有一點點的瑕疵。因為可能需要額外多設定幾個@media的寬度。
屏幕寬度從1280px、1024px、768px、640px、480px，直到320px，跨度非常大，為了保持比較完美的顯示，通常會用Screen Size之類的瀏覽器插件，來顯示不同寬度下布局的顯示狀況。h1 標簽內，因為字型大小大，字數也或多或少，為保險起見，有時會為每一種屏幕寬度都定製一個合適的字型大小，這樣稍顯麻煩。
有一種解決的方案，用Viewport的方法。
%vw = %viewport width
我們用%vw來定義字型大小，也就是說用屏幕寬度的百分比來定義字型大小的大小。例如：
h1 {
font-size: 2.5vw;
}
這樣一來，無論屏幕寬度如何變化，h1的字型大小會保持在Viewport寬度的2.5%的大小。
6、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小設備窗口下瀏覽，頁面內容會很長，這個時候我們要在底部加個返回頁面頂部的按鈕。
7、自適應網頁設計和響應式網頁設計有什麼區別
通俗的說，自適應網頁設計也是響應式網頁設計，響應式網頁設計也是自適應網頁設計。但是真正的細分起來，自適應只是響應式的一個子集，指網頁中整體大圖的自適應或者banner的自適應。
響應式設計可以一個網站兼容多個不同終端
響應式網頁設計優勢：流體網格的網站適合響應式網頁設計。
1、靈活性強，可以適應不同解析度的設備
2、方便快捷的解決多設備顯示適應問題
自適應網頁設計優勢：固定斷點的網站適合自適應網頁設計。
1、實施起來代價更低，測試更容易
2、自適應布局可以讓設計更加可控，因為它只需要考慮幾種狀態就可以了
雖然響應式/自適應網頁設計會帶來兼容各種設備工作量大、代碼累贅、載入時間長的缺點，但它們能「一次設計，普遍適用」，可以根據屏幕解析度自適應以及自動縮放圖片、自動調整布局，它們不只是技術的實現，更多的是對於設計的全新思維模式。
8、什麼是響應式網頁設計
響應式Web設計(Responsive Web design)的理念是:頁面的設計與開發應當根據用戶行為以及設備環境(系統平台、屏幕尺寸、屏幕定向等)進行相應的響應和調整。具體的實踐方式由多方面組成，包括彈性網格和布局、圖片、CSS media query的使用等。無論用戶正在使用筆記本還是iPad，我們的頁面都應該能夠自動切換解析度、圖片尺寸及相關腳本功能等，以適應不同設備;換句話說，頁面應該有能力去自動響應用戶的設備環境。響應式網頁設計就是一個網站能夠兼容多個終端--而不是為每個終端做一個特定的版本。這樣，我們就可以不必為不斷到來的新設備做專門的版本設計和開發了。
9、如何用一簡單的CSS製作響應式HTML網頁
建議展開閱讀
新人如果想快速開發出響應式網站建議使用響應式框架Bootstrap,Foundation等等......
三個部分[Viewport][網格視圖][媒體查詢]
1.先在head裡面設置Viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">用戶可以通過平移和縮放來看網頁的不同部分。
2.很多響應式都基於網格視圖設計
響應式網格視圖通常是 12 列，寬度為100%，在網頁自動伸縮
比如CSS裡面寫
這樣即可在html寫
<div class="row">達到簡單的響應式效果[拖拽瀏覽器大小查看]
圖片響應式方法
div {background-size 屬性設置為 "contain", 圖片比例會自動縮放。
3.媒體查詢主要用於針對不同的媒體類型定義不同的樣式
比如我在電腦顯示圖片1,但是在手機顯示的是圖片2
詳細可以私信我