PC，PC設(shè)計(jì)好后、手機(jī)訪問(wèn)就是自動(dòng)適應(yīng)尺寸的。pageadmin和discuz 的建站系統(tǒng)響應(yīng)式不錯(cuò)。

響應(yīng)式Web設(shè)計(jì)是在開(kāi)發(fā)和設(shè)計(jì)網(wǎng)站過(guò)程中產(chǎn)生的一種方式，它的目的是讓內(nèi)容布局能隨用戶使用顯示器的不同而變化。再明確點(diǎn)說(shuō)，這種設(shè)計(jì)概念，就是讓原本1292像素寬，4欄的內(nèi)容，能夠很好地顯示在1025像素寬的用戶屏幕上，同時(shí)還能自動(dòng)簡(jiǎn)化成2欄。當(dāng)然，讓它很好的適應(yīng)智能手機(jī)和其他種類電腦的屏幕也就成了水到渠成的事了。這種特殊的設(shè)計(jì)形式就被成為“響應(yīng)式Web設(shè)計(jì)”。響應(yīng)式Web設(shè)計(jì)的優(yōu)點(diǎn)：可以兼容所有尺寸的屏幕，隨著手持設(shè)備（手機(jī)）屏幕尺寸繁多，也有很好的兼容性；而且開(kāi)發(fā)一次，pc版和觸屏版，手機(jī)版融合為一；響應(yīng)式Web設(shè)計(jì)的缺點(diǎn)：對(duì)前端工程師要求比較高，它的屏幕兼容要求前端工程師對(duì)各種瀏覽器差異性了解比較多，對(duì)于大數(shù)據(jù)展示的門(mén)戶站點(diǎn)，如果用同一頁(yè)面，即時(shí)瀏覽器不崩潰，在手機(jī)上一個(gè)頁(yè)面，很難滑到最底部，帶來(lái)操作是十分不方便的，觸屏版和手機(jī)版對(duì)優(yōu)質(zhì)信息展示不足。綜合優(yōu)缺點(diǎn)：響應(yīng)式Web設(shè)計(jì)在企業(yè)站點(diǎn)，微型或者小站還是可以用的，對(duì)于大中型站點(diǎn)不合適（尤其大信息量展示的）。

請(qǐng)搜索 響應(yīng)式布局1234<!--例子：http://www.ido321.com/<!--這個(gè)站打開(kāi)后調(diào)整瀏覽器寬度，網(wǎng)頁(yè)寬度自動(dòng)變化，足夠小時(shí)，關(guān)閉右側(cè)欄目--><!--響應(yīng)式布局是移動(dòng)端 各種尺寸不同的平板/手機(jī) 瀏覽網(wǎng)頁(yè)的解決方案 --><!--簡(jiǎn)單的用法就是width:100%這樣，外層元素百分比化，并設(shè)置最大width:max-width:960px這樣-->---------------頁(yè)面的設(shè)計(jì)與開(kāi)發(fā)應(yīng)當(dāng)根據(jù)用戶行為以及設(shè)備環(huán)境(系統(tǒng)平臺(tái)、屏幕尺寸、屏幕定向等)進(jìn)行相應(yīng)的響應(yīng)和調(diào)整。具體的實(shí)踐方式由多方面組成，包括彈性網(wǎng)格和布局、圖片、CSS media query的使用等。無(wú)論用戶正在使用筆記本還是iPad，我們的頁(yè)面都應(yīng)該能夠自動(dòng)切換分辨率、圖片尺寸及相關(guān)腳本功能等，以適應(yīng)不同設(shè)備；換句話說(shuō)，頁(yè)面應(yīng)該有能力去自動(dòng)響應(yīng)用戶的設(shè)備環(huán)境。響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端——而不是為每個(gè)終端做一個(gè)特定的版本。這樣，我們就可以不必為不斷到來(lái)的新設(shè)備做專門(mén)的版本設(shè)計(jì)和開(kāi)發(fā)了。我知道 和了解響應(yīng)式~我現(xiàn)在只想在PC端用兼容 主流的1366x768，1920X1280.等。也不需要流布局處理組件，我寫(xiě)了100%之后 F12調(diào)試的 時(shí)候 div 的高度 會(huì)縮水 （高度我寫(xiě)的是 height：10%）。。。。有沒(méi)有這樣的 啊是不是 必須使用js 獲取 瀏覽器的 高度，，， F12 會(huì)占用瀏覽器高度，不是覆蓋式你可以點(diǎn)擊F12 審查元素 右上叉號(hào)左邊那一個(gè)按鈕（undock into separate window） 讓審查元素生成獨(dú)立窗口就不要占用 窗口高度了-------js---------屏幕分辨率的高：window.screen.height屏幕分辨率的寬：window.screen.width

響應(yīng)式與自適應(yīng)的原理是相似的，都是檢測(cè)設(shè)備，根據(jù)不同的設(shè)備采用不同的css，而且css都是采用的百分比的，而不是固定的寬度，不同點(diǎn)是響應(yīng)式的模板在不同的設(shè)備上看上去是不一樣的，會(huì)隨著設(shè)備的改變而改變展示樣式，而自適應(yīng)不會(huì)，所有的設(shè)備看起來(lái)都是一套的模板，不過(guò)是長(zhǎng)度或者圖片變小了，不會(huì)根據(jù)設(shè)備采用不同的展示樣式，流式就是采用了一些設(shè)置，當(dāng)寬度大于多少時(shí)怎么展示，小于多少時(shí)怎么展示，而且展示的方式向水流一樣，一部分一部分的加載，靜態(tài)的就是采用固定寬度的了。

步驟1 創(chuàng)建空白的HTML 5模版 首先，我們創(chuàng)建一個(gè)空白的模版，代碼很簡(jiǎn)單，如下所示：復(fù)制代碼步驟2 增加HTML 5新標(biāo)簽 HTML 5中新增加了不少標(biāo)簽，如： article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section在頁(yè)面模版中，我們需要確保每個(gè)區(qū)域都能正確地對(duì)齊，因此需要使用HEADER、 NAVIGATION、 CONTENT、 SIDEBAR和Footer這些標(biāo)簽。代碼如下所示：復(fù)制代碼讀者可能留意到這里使用的div id=”wrapper”，這個(gè)是稍候用來(lái)做meida query的時(shí)候調(diào)整全局CSS樣式調(diào)整用的 步驟3 往HTML 5標(biāo)簽中增加代碼 1）首先往標(biāo)題中增加如下代碼： 　Simple HTML5 Template 復(fù)制代碼2）往導(dǎo)航標(biāo)簽中添加如下代碼，這樣很方便地構(gòu)件了一個(gè)簡(jiǎn)單的頁(yè)面分類導(dǎo)航： Home About Parent Page Child One Child Two with child Child One Child Two Child Three Child Three Contact 復(fù)制代碼3）使用標(biāo)簽來(lái)描述每一個(gè)要展示的內(nèi)容實(shí)體,比如要展示的是多篇文章列表,其中的每一篇文章的具體內(nèi)容就可以使用標(biāo)簽了。如下代碼所示： This is a title for post Richard KS 20th March 2013 Tutorials HTML5, CSS3 and Responsive 10 Comments Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 復(fù)制代碼4）添加標(biāo)簽 HTML5提供的元素標(biāo)簽用來(lái)表示當(dāng)前頁(yè)面或文章的附屬信息部分，可以包含與當(dāng)前頁(yè)面或主要內(nèi)容相關(guān)的引用、側(cè)邊欄、廣告、nav元素組，以及其他類似的有別與主要內(nèi)容的部分。根據(jù)目前的規(guī)范，元素有兩種使用方法：被包含在中作為主要內(nèi)容的附屬信息部分，其中的內(nèi)容可以是與當(dāng)前文章有關(guān)的引用、詞匯列表等。 在之外使用，作為頁(yè)面或站點(diǎn)全局的附屬信息部分；最典型的形式是側(cè)邊欄(sidebar)，其中的內(nèi)容可以是友情鏈接、附屬導(dǎo)航或廣告單元等。 代碼如下：Categories Category 1 Category 2 Parent Category Child One Child Two Grandchild One Grandchild Two Grandchild Three Child Three Category 3 Text Lorem Ipsum is simply dummy text of the printing and typesetting industry. 復(fù)制代碼5）加上最后的標(biāo)簽，代碼為： Copyright@ 2013 HTML5.com Privacy Policy - About Us復(fù)制代碼 步驟4 增加CSS樣式 首先創(chuàng)建一個(gè)空白的樣式，如下：[/code] 然后在http://necolas.github.com/normalize.css/中下載這個(gè)css,然后將其內(nèi)容復(fù)制到該空白的文件中代碼如下： [code]body {font-family: arial, sans-serif;font-size: 100%; /* best for all browser using em */padding:0;margin:0;}*, html { line-height: 1.6em; }article img { width:auto; max-width:100%; height:auto; }.sidebar a, article a, header a, footer a { color: #C30; }header a { text-decoration: none; }#wrapper {font-size: 0.8em; /* 13px from 100% global font-size */max-width: 960px; /* standard 1024px wide */margin: 0 auto;}/* css for */header { padding: 1em 0; margin: 0px; float: left; width: 100%;}header hgroup { width: 100%; font-weight:normal; }/* css for */nav { display: block; margin: 0 0 2em; padding: 0px; float: left; width: 100%; background-color: #181919;}nav ul ul {display: none;}nav ul li:hover > ul {display: block;}nav ul { padding: 0; list-style: none; position: relative; display: inline-table; z-index: 9999; margin: 0px; float: left; width: 100%;}nav ul:after {content: ""; clear: both; display: block;}nav ul li {float: left;}nav ul li:hover a {color: #fff;}nav ul li a { display: block; padding: 1em; font-size: 1.125em; color: #ccc; text-decoration: none; margin: 0px; background-color: #000; border-right: 1px solid #333;}nav ul li:last-of-type a {border-right: 1px solid transparent !important;}nav ul ul { background: #5f6975; border-radius: 0px; padding: 0; position: absolute; top: 100%; width: auto; float: none;}nav ul li:hover { background: #5f6975; color: #FFF;}nav ul ul li a:hover { background-color: #4b545f;}nav ul ul li {float: none;border-bottom: 1px solid #444240;position: relative;}nav ul ul li a {padding: 0.5em 1em;font-size: 1em;width:10em;color: #fff;}nav ul ul ul {position: absolute; left: 100%; top:0;}/* css for */section.content { width: 70%; float:left; }.content article { width:100%; float:left; padding: 0 0 1em; margin: 0 0 1em; border-bottom: 1px solid #ddd; }article .entry { clear:both; padding: 0 0 1em; }h1.post-title { font-size: 1.8em; margin:0; padding:0;}.entry.post-meta { color: #888; }.entry.post-meta span { padding: 0 1em 0 0; }.entry.post-content { font-size: 1.125em; margin:0; padding:0;}/* css for */aside.sidebar { width: 25%; float:right; }aside.sidebar ul { width:100%; margin: 0px; padding: 0px; float: left; list-style: none;}aside.sidebar ul li { width:100%; margin: 0px 0px 2em; padding: 0px; float: left; list-style: none;}aside.sidebar ul li ul li { margin: 0px 0px 0.2em; padding: 0px;}aside.sidebar ul li ul li ul li { margin: 0px; padding: 0px 0px 0px 1em; width: 90%; font-size: 0.9em;}aside.sidebar ul li h3.widget-title { width:100%; margin: 0px; padding: 0px; float: left; font-size: 1.45em;}/* css for */footer { width: 98%; float:left; padding: 1%; background-color: white; margin-top: 2em;}footer .footer-left { width: 45%; float:left; text-align:left; }footer .footer-right { width: 45%; float:right; text-align:right; }復(fù)制代碼步驟5 為移動(dòng)應(yīng)用使用@media query查詢 為了進(jìn)行響應(yīng)式設(shè)計(jì)，最佳的方案是使用@media query去進(jìn)行查詢，在上面的CSS代碼中添加如下代碼：/* ipad 768px */@media only screen and (min-width:470px) and (max-width:770px){body { background-color: red; } #wrapper { width:96%; font-size: 0.6875em; }section.content, aside.sidebar { width:100%; }}/* iphone 468px */@media only screen and (min-width:270px) and (max-width:470px){body { background-color: yellow; } #wrapper { width:96%; font-size: 0.6875em; }section.content, aside.sidebar { width:100%; }}復(fù)制代碼步驟6 增加jquery,modernizer和html5shiv到標(biāo)簽中 這里推薦使用Modernizr 和html5shiv，它們都是一個(gè)能在多種瀏覽器中通過(guò)運(yùn)行各種腳本兼容運(yùn)行支持大部分HTML 5標(biāo)簽的插件。我們將它們和jQuery庫(kù)放在標(biāo)簽前，代碼如下：0復(fù)制代碼

響應(yīng)式Web設(shè)計(jì)(Responsive Web design)的理念是：頁(yè)面的設(shè)計(jì)與開(kāi)發(fā)應(yīng)當(dāng)根據(jù)用戶行為以及設(shè)備環(huán)境(系統(tǒng)平臺(tái)、屏幕尺寸、屏幕定向等)進(jìn)行相應(yīng)的響應(yīng)和調(diào)整。具體的實(shí)踐方式由多方面組成，包括彈性網(wǎng)格和布局、圖片、CSS media query的使用等。無(wú)論用戶正在使用筆記本還是iPad，我們的頁(yè)面都應(yīng)該能夠自動(dòng)切換分辨率、圖片尺寸及相關(guān)腳本功能等，以適應(yīng)不同設(shè)備；換句話說(shuō)，頁(yè)面應(yīng)該有能力去自動(dòng)響應(yīng)用戶的設(shè)備環(huán)境。響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端——而不是為每個(gè)終端做一個(gè)特定的版本。

IE8以下瀏覽器之所以不支持響應(yīng)式網(wǎng)站是因?yàn)槠洳恢С诌x擇器，要實(shí)現(xiàn)這點(diǎn)需要respond.js解決。調(diào)用respond.js即可補(bǔ)充一下：因?yàn)閏dn，本地會(huì)沒(méi)有效果，請(qǐng)上傳服務(wù)器測(cè)試。