㈠ 什麼叫響應式網站
響應式布局，是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。
優點：
1、用戶體驗友好
響應式網站可以根據不同終端、不同尺寸和不同應用環境，自動調整界面布局、展示內容、內容大小，提供非常好視覺展示效果，一致性友好體驗。
2、節省設計與開發時間
響應式網站界面只需要設計兩套設計效果圖，後期維護不需要分別維護pc界面、pad界面、移動界面，專心維護一個網站即可。
3、SEO友好
由於響應網站在不同終端有友好的界面展示效果，用戶可以與網站一直保持聯系，比如URL不變積累分享。
4、可以適應所有設備屏幕
擁有了響應式的網站設計則不同，用戶可以一直和網站保持聯系，而且它對用戶非常用好。
(1)響應式網站怎麼寫擴展閱讀：
響應式布局的缺點
1、設計與風格有局限性
自由度太低，局限性較大。
2、對IE老闆兼容性不友好
對於老版本IE（IE6、IE7、IE8）支持不好。
3、靈活性有所欠缺
基於不同終端的設備屬性不同，對產品用戶體驗要求就會截然不同。內容比較多帶有功能性的網站不適合做響應式網站設計。
㈡ 網頁設計中響應式具體怎麼實現
響應式網頁設計現在無疑是一件大事情。如果你還不了解響應式設計，可以看看我最近發表的響應式站點列表（譯者註：可以好好看看示例中的網站在不同解析度下的展現方式）。對新手來說，響應式設計可能有一點復雜，但是事實上比你想像的簡單。為了幫助你迅速的了解響應式設計，我起草了一篇快速教程。你可以在3個步驟中學習到響應式設計和媒介查詢（Media Queries）的基本原理（假定你了解基本的CSS知識）。
第一步：Meta標簽
大多數移動瀏覽器將HTML頁面放大為寬的視圖（viewport）以符合屏幕解析度。你可以使用視圖的meta標簽來進行重置。下面的視圖標簽告訴瀏覽器，使用設備的寬度作為視圖寬度並禁止初始的縮放。
第二步：HTML結構
在這個例子里，我有一個包括頭部、內容、側邊欄和頁腳的基本頁面布局。頭部有固定的高度180像素，內容容器是600像素而側邊欄是300像素。
第三步：媒介查詢-Media Queries
CSS3 Media Query-媒介查詢是響應式設計的核心。它根據條件告訴瀏覽器如何為指定視圖寬度渲染頁面。
當視圖寬度為小於等於980像素時，如下規則將會生效。基本上，我會將所有的容器寬度從像素值設置為百分比以使得容器大小自適應。
然後為小於等於700像素的視圖指定#content和#sidebar的寬度為自適應並且清除浮動，使得這些容器按全寬度顯示。
對於小於等於480像素（手機屏幕）的情況，將#header元素的高度設置為自適應，將h1的字體大小修改為24像素並隱藏側邊欄。
你可以根據你的喜好添加足夠多的媒介查詢。我在示例中僅僅展示了3個媒介查詢。媒介查詢的目的在於為指定的視圖寬度指定不同的CSS規則，來實現不同的布局。媒介查詢可以寫在同一個或者單獨的樣式表中。
㈢ 做好的網頁怎樣簡單快速的實現響應式
首先在寫頁面的時候就要為響應式網頁做准備，寬使用百分百，不設置固定高度。
設置meta 進行適應移動端頁面。
了解pc 端主流顯示器解析度，設置顯示斷點，例如1920 * 1080 通過媒體查詢設置 1920 寬度的顯示方式，1600*1200，設置 1600寬度的顯示方式，其實一般是1200 以上的都設置同一個顯示方式就可以了，主要是顯示器解析度低的，例如 800 * 600 設置它的顯示方式，
xs: 576px sn:≥576px md: ≥768px lg:≥992px xl:≥1200px xxl:≥1600px
一般需要通過媒體查詢設置的pc端的范圍有這些。
移動端的話一般不是通過媒體查詢來設置， 先用 js 將單位設置為 rem, 即 1rem = 100px
這樣則 默認字體為 0.16rem; 通過百分百寬度來設置盒子的寬，讓它根據屏幕來做調整。
如果使用框架的話還可以結合 柵格系統來做響應式兼容。
其實移動端的兼容是最麻煩的，因為手機品牌種類多，系統一般分 安卓 和 ios ,但是還有系統版本，問題，不同系統版本也會有不一樣的顯示方式（特別是ios系統）。
安卓主要是品牌種類的不同，屏幕 解析度的不同。
想要做基本的兼容就是先設置meta，然後將寬設置為 百分百比
㈣ H5響應式布局 響應式圖片 響應式布局網站怎麼寫
有很多中寫法,
1.媒體查詢(@media),具體怎麼使用可以去w3c去查詢,很好用,這個相當於css中的js命令,可以規定在瀏覽器可視窗口的寬度解析度在多少的情況下執行那部分的css代碼.一般用於與其他css並排使用.
2.vw,vh布局,同樣可以查查w3c裡面有vw和vh詳細解釋,簡單說就是可視化窗口的百分比長度,比如20vw指可視化窗口的20%長度,經過瀏覽器計算,最終換算為px單位, 一般用於長度單位使用,如果你會less的話,還可以聲明less變數,將一個固定設計圖的尺寸寫在裡面供其他使用,
例子:
@vw:19.2vw//此處聲明變數,並將@vw賦值為19.2vw,比如設計圖的尺寸為1920px,當然 沒有這么大的,1920/100就是vw前面的由來
.box{
height:20/@vw; width:100/@vw
//這里這么寫就是說,你設計圖本身是1920px,裡面其中的一個各自為寬度100px,高度 20px,那麼可以將px固定單位換成/@vw這種可變單位,從而達到頁面內容跟隨網頁可 視區域大小去變動
}
3.用js去控制font-size的值,這個可以在網上去搜索,有相應的js文件,直接引入,然後類似於上面
將px單位換成rem即可,不過按照需要你自己需要手動更改換算比例,因為一般都是750px的 設計圖為基礎,具體我這不細說了哈
4.百分布局,很久不用了,高度控制不好整體網頁癱瘓,反正我是不用了,有了vh和vw,百分布局原理與這個類似,當有瀏覽器不支持vw,vh命令的時候可以使用百分布局,不過ie現在誰還用........
暫時說這些把,還有別的話,望大牛補充
㈤ html5怎麼製作一個響應式網頁
HTML5 製作響應式網頁，首先需要考慮是全平台適配還是只是移動端適配。這里以移動端響應式網站為例，講述如何製作響應式網頁。
1、選定基本設計尺寸，一般以1080為基準。確定響應式web設計的應用場景之後，和美工（或設計師）溝通，之前，一般需要美工出幾套主流移動設備屏幕解析度的設計圖，現在，使用流式布局以及rem等可以使用一套設計圖，以最常用的移動設備屏幕解析度為基準。
2、當美工完成設計圖之後，前端工程師的工作就開始了。這時你就可以使用PS或是FW進行切圖了。一般說來，Fireworks cs6切圖更快，但是Fireworks有時會有圖片失真的情況發生，所以，有時需要使用PS進行配合，PS有切片工具可以專門用來切圖。
㈥ 響應式網站需要什麼代碼
HTML5遵循web3規范大腕互聯響站建站一鍵製作響應式網站 ,希望對你有幫助
㈦ 學寫響應式網站，應該要怎麼寫和掌握哪些知識
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、希望對你有幫助。
㈧ HTML5怎麼製作響應式網頁
1.調整視口
代碼實例：
<!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,即將視口設置為當前設備的寬度。
2.確定設計圖的最小字體
瀏覽器（部分）能夠顯示的最小字體未12px，當移動端頁面寬度為320px時，要保證最小字體為12px，那麼在1080px的設計圖中，最小字體應當為42px。
代碼實例：
<styletype="text/css">
html{
font-size:42px;
}
</style>
3.浮動布局
各個區塊都是浮動的，不是固定不變的。為了能自適應各個窗口。
代碼實例：
.main{
float:left;
width:70%;
}
.box{
float:left;
width:60.93%;
font-size:1.71rem;
text-align:center;
line-height:4.64rem;
}float浮動的好處就是，如果寬度不夠放置下這個元素，元素會自動滾動到下方。
4.通過媒介查詢，為不同設備載入相應樣式
有條件應用樣式：
<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。
㈨ 我想開發一個響應式布局的網站,請問怎麼做
頁面和樣式當然是HTML5+CSS3
但是你需要先設計pc，移動端各種解析度的展示布局。
然後使用css3的 @media query 根據不同解析度寫css樣式，完成不同解析度設備的布局。
相應式網站就是這么做的，主要就是根據不同設備寫不同樣是來實現不不同設備的不同布局顯示。
㈩ 自己怎麼做響應式網站
做響應式網站，一般可以利用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，用戶不可擴展，頁面不可縮放。
如果你是剛接觸響應式網站，建議可以藉助建站寶盒來做響應式網站