響應式布局模板站長之家

1、什麼是響應式網頁布局

「響應式布局」已經成為現今網站建設方案中的熱門術語，隨著HTML5技術的發展，它將很快從一種趨勢變為常規。但目前，很多客戶，甚至互聯網從業者，並沒有完全認識響應式布局的本質，他們經常被以下誤區所迷惑：誤區一：只要是「PC端+移動端」的網站就是響應式布局首先，我們要明確一點，採用響應式布局的網站，無論在哪個終端，都是同一個網站，且都通過同一個域名來打開和顯示網站內容。它會根據終端屏幕的尺寸，智能調整排版布局，以達到最佳瀏覽效果。事實上，很多網站是通過在PC端和移動端搭建兩個不同的網站，並為它們分別綁定兩個域名，然後，通過對終端設備的判斷，來決定打開哪一個網站更為合適。類似於這種建站方式，我們稱之為「偽響應式」，因為它本質兩個不同的網站而已。顯然，偽響應式的技術含量很低，自然建站成本也低。但它對後期網站的維護和擴展也會產生一定的副作用，因為你需要維護兩個甚至的網站。不過這並不是不可接受的，在建站預算有限的情況下，這也不失為一個折中的選擇。當然，如果採用響應式布局，不僅可以使網站變得更加輕量，而且，不同終端上統一的設計風格，會給瀏覽者增添的信任感。誤區二：響應式布局網站，就是移動端的網站我們早在《響應式布局的設計思路》一文中就提到過，不能一味地認為響應式布局就是專門為移動建站而設計的。的確，響應式布局是在移動互聯網誕生之後才出現的，最初的目的也是為了讓網站版面對移動端可以表現的更為友好。但事實上，響應式布局是針對網站的一種製作方案，並不是針對專門的某個終端而設計的。它可以讓網站適應任何一個終端，而不是在每個終端上去開發不同的網站。所以，你可以不必糾結某個響應式網站到底是PC站，還是移動站，只要它能夠響應各種終端，為訪客帶來最好的用戶體驗，就足夠了。當然，你也可以根據用戶群的不同，為PC設計一套響應式網站，再為手機設計一套響應式網站，讓兩個網站都可以完美響應各種終端設備。誤區三：響應式布局就是做2套網站布局很多人認為響應式網站就是做一套PC端的布局版式，再做一套移動端的布局版式，有2套布局就算響應式了。實際上這只是最初級的響應式布局，它甚至還不能很好地響應不同終端。如果我們要做的更為精細，或許要考慮PC端多種尺寸的屏幕，比如19寸、23寸，或者更大一些的屏幕，是不是要做一些布局微調，或設計出不同的布局方案。移動端也是一樣，我們可以為Pad、手機、iWatch、gGlass等設備，設計不同的布局。甚至還可以考慮橫屏和豎屏不同的顯示方案。當然，這么做成本會大很多，但也說明響應式並不僅僅局限於2套網站的布局。

2、怎麼實現網站的響應式布局，適合不同解析度

如我們需要兼容不同屏幕解析度、清晰度以及屏幕定向方式豎屏(portrait)、橫屏(landscape)，怎樣才能做到讓一種設計方案滿足所有情況？對此，馬海祥覺的我們的布局應該是一種彈性的柵格布局，不同尺寸下彈性適應，如以下頁面中各模塊在不同尺寸下的位置：

那麼我們具體要怎麼做呢？
1、Meta標簽定義
使用 viewport meta 標簽在手機瀏覽器上控制布局
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
通過快捷方式打開時全屏顯示
<meta name="apple-mobile-web-app-capable" content="yes" />
隱藏狀態欄
<meta name="apple-mobile-web-app-status-bar-style" content="blank" />
iPhone會將看起來像電話號碼的數字添加電話連接，應當關閉
<meta name="format-detection" content="telephone=no" />
2、使用Media Queries適配對應樣式
常用於布局的CSS Media Queries有以下幾種：
設備類型(media type):
all所有設備；
screen 電腦顯示器；
print列印用紙或列印預覽視圖；
handheld便攜設備；
tv電視機類型的設備；
speech語意和音頻盒成器；
braille盲人用點字法觸覺回饋設備；
embossed盲文列印機；
projection各種投影設備；
tty使用固定密度字母柵格的媒介，比如電傳打字機和終端。
設備特性(media feature):
width瀏覽器寬度；
height瀏覽器高度；
device-width設備屏幕解析度的寬度值；
device-height設備屏幕解析度的高度值；
orientation瀏覽器窗口的方向縱向還是橫向，當窗口的高度值大於等於寬度時該特性值為portrait，否則為landscape；
aspect-ratio比例值，瀏覽器的縱橫比；
device-aspect-ratio比例值，屏幕的縱橫比。
例子：
/* for 240 px width screen */
@media only screen and (max-device-width:240px){
selector{ ... }
}
/* for 320px width screen */
@media only screen and (min-device-width:241px) and (max-device-width:320px){
selector{ ... }
}
/* for 480 px width screen */
@media only screen (min-device-width:321px)and (max-device-width:480px){
selector{ ... }
}
適用於布局的Media Queries，這里在馬海祥博客上我們就不再做詳述，有興趣的話，可通過官方文檔進一步了解。
3、表格(table)的響應式處理
那麼對於表格(table)的響應式處理該是怎樣的呢？我們該如何突破Table的局限性呢？接下來我們來了解以下的幾種針對表格響應式處理的方法：
（1）、隱藏不重要數據列
處理前：

（點擊查看大圖）
處理後：

實現方法代碼：
@media only screen and (max-width: 800px) {
table td:nth-child(2),
table th:nth-child(2) {display: none;}
}
@media only screen and (max-width: 640px) {
table td:nth-child(4),
table th:nth-child(4),
table td:nth-child(7),
table th:nth-child(7),
table td:nth-child(8),
th:nth-child(8){display: none;}
}
以用戶角度思考，每個人對數據的認知不同，或許你隱藏的數據對於他卻是很重要的，所以對於這種方法馬海祥並不推薦。
（2）、多列橫向變2列縱向
處理前：

處理後：

實現方法：<thead>定位隱藏，<td>變塊元素，並綁定對應<th>列名，然後用偽元素的content:attr(data-th)實現<th>：

（3）、固定首列，剩餘列橫向滾動
處理前：

處理後：

實現原理代碼：
thead {float:left;}
tbody {display:block;width:auto;overflow-x:auto;}
二、響應式內容
1、響應式圖片
帶寬是手機終端的硬傷，如果我們只是頁面布局做了響應式處理，在我們用手機訪問時，請求的圖片還是PC上的大圖；文件體積大，消耗流量多，請求延時長，因此導致的問題也是不可估量的。那麼我們就得把圖片也處理成響應式的根據終端類型尺寸解析度來適配出合理的圖形。

處理原理：瀏覽器獲取用戶終端的屏幕尺寸、解析度邏輯處理後輸出適應的圖片，如屏幕解析度320*480，那麼我們匹配給它的是寬度應小於320px的圖片。如果終端屏幕的DPI(device pixels)DPI詳解值很高，也就是高清屏，那麼我們就得輸出2倍解析度的圖形(寬:640px)；以保證在高清屏下圖形的清晰度。各種移動終端的屏幕參數可通過http://screensiz.es/phone查詢。
解決方案：其實W3C已經有一個用於響應式圖形的草案：新定義標簽<picture>，因為它還只是草案，目前還沒有支持的瀏覽器，期待在不久的未來我們能用上。雖然目前不支持，但我們還是來了解下，為之後的內容做個鋪墊。
<picture>是一個圖形element，內容由多個源圖組成，並由CSS Media Queries來適配出合理圖形，代碼規范如下：
<picture width="500" height="500">
　<source media="(min-width: 640px)" srcset="large-1.jpg 1x, large-2.jpg 2x">
　<source media="(min-width: 320px)" srcset="med-1.jpg 1x, med-2.jpg 2x">
　<source srcset="small-1.jpg 1x, small-2.jpg 2x">
　<img src="small-1.jpg" alt="">
　<p>Accessible text</p>
　<!-- Fallback content-->
　<noscript>
　<img src="external/imgs/small.jpg" alt="Team photo">
　</noscript>
</picture>
註：source: 一個圖片源；
media: 媒體查詢，用於適配屏幕尺寸；
srcset: 圖片鏈接，1x適應普通屏，2x適應高清屏；
<noscript/>: 當瀏覽器不支持腳本時的一個替代方案；
<img/>: 初始圖片；另外還有一個無障礙文本，類似<img/>的alt屬性。
雖然<picture>目前還不支持，但它的原理我們是可借鑒的，所以就誕生了一個用於圖片響應式處理的類庫Picturefill
<span data-picture data-alt="圖片描述文本">
　<span data-src="small.jpg"></span>
　<span data-src="medium.jpg" data-media="(min-width: 400px)"></span>
　<span data-src="large.jpg" data-media="(min-width: 800px)"></span>
　<span data-src="extralarge.jpg" data-media="(min-width: 1000px)"></span>
　<!-- 瀏覽器不支持JS時的備用方案. -->
　<noscript>
　<img src="external/imgs/small.jpg" alt="圖片描述文本">
　</noscript>
</span>
其原理就是JS獲取Source的源以及CSS Media Queries規則，輸出適應圖片，邏輯細節這里不再解析，感興趣的可查看其JS代碼，邏輯不是很復雜，也可以自己封裝一個類庫，以適用於自身產品，例如圖片載入失敗的替代方案。
當然，在未來的CSS Image Level 4中已經實現了響應式圖片的原生語法：image-set
<image-set> = image-set([ <image-set-decl>, ]* [ <image-set-decl> | <color>])
<image-set-decl> = [ <image> | <string> ] <resolution>
那麼我們的響應式圖片可以這樣重寫了
background-image:url(default.jpg); /* 普通幕 */
background-image: -webkit-image-set(url(medium.jpg) 1x, url(large.jpg) 2x); /* Retina高清屏 */
註：Webkit 目前只實現了 url() 形式的取值，且dppx值取負值[-2x]貌似也是合法的。
當然除此之外，還有其他的響應式處理，如服務端user-agent嗅探。
2、高解析度(DPI)下的響應式處理
（1）、SVG：優點可承載色彩豐富、設計復雜圖形，且渲染不會出現邊緣不順滑；缺點是IE的支持不完美。
（2）、Icon fonts：支持多瀏覽器，圖形顏色大小的修改成本低，易於維護；圖形表現單一，不支持色彩豐富且復雜的圖形，IE6渲染有毛邊。
（3）、-webkit-image-set:只支持單個圖形的適配，不利於圖形合並，兼容不完美（Safari 6+, Chrome 21+）。
JS檢測：var retina = window.devicePixelRatio > 1;
CSS Media Query:
@media (-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */
(min--moz-device-pixel-ratio: 2), /* Older Firefox browsers (prior to Firefox 16) */
(min-resolution: 2dppx), /* The standard way */
(min-resolution: 192dpi) /* dppx fallback */
3、高解析度下的1px border
由於高清屏的特性，1px是由2×2個像素點來渲染，那麼我們樣式上的border:1px在Retina屏下會渲染成2px的邊框，與設計稿有出入，為了追求1px精準還原，我們就不得不拿出一個完美的解決方案。

在Photoshop中，如果需要看似0.5px的邊框，常見的方法就是對1px邊框加上陰影模糊1px。同理，我們在retina屏下需要做到真實的1px邊框，可利用box-shadow屬性模擬。
@media only screen and (-webkit-min-device-pixel-ratio:1.5),
only screen and (min-device-pixel-ratio:1.5) {
button {
border:none;
padding:0 16px;
box-shadow: inset 0 0 1px #000,
inset 0 1px 0 #75c2f8,
0 1px 1px -1px rgba(0, 0, 0, .5);
}
}

3、靜態，自適應，流式，響應式四種網頁布局有什麼區別

做好的html頁面都是靜態的
你所說的靜態應該是固定值
靜態：比如谷底固定好div的寬度和高度[偏向理解]
自適應：也就是按照你的瀏覽器寬度自動縮小放大
流式：也就是div自行排列 比如[div 寬是100px 那麼我瀏覽器寬是500px 我們可以排列5個div 如果瀏覽器寬是300px 那麼div就會自動排列成2行 第一行是3個div 第二行是2個div]
響應式：藉助css3中的Media Queries 響應媒體查詢這個標簽來達到判斷解析度大小來執行css中的樣式代碼[早期做響應式的話 使用js來判斷]
像這樣網站: ipbun.cn 就是響應式的

4、web前端響應式布局怎麼解決'

1、不要優先為桌面版設計
2、導航欄菜單的麻煩
3、不應隱藏內容
4、單獨的移動端網站地址
5、糟糕的用戶體驗
6、不要忽視跨情景的公約
7、不要忽視頁面的載入時間
8、不要為觸摸屏設備開發
9、不找經驗淺的人做前端開發

5、什麼是響應式布局

響應式布局是Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。這個概念是為解決移動互聯網瀏覽而誕生的。
響應式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗，而且隨著目前大屏幕移動設備的普及，用大勢所趨來形容也不為過。隨著越來越多的設計師採用這個技術，我們不僅看到很多的創新，還看到了一些成形的模式
優點和缺點
優點：
面對不同解析度設備靈活性強
能夠快捷解決多設備顯示適應問題
缺點：
兼容各種設備工作量大，效率低下
代碼累贅，會出現隱藏無用的元素，載入時間加長
其實這是一種折中性質的設計解決方案，多方面因素影響而達不到最佳效果
一定程度上改變了網站原有的布局結構，會出現用戶混淆的情況
2設計思路
我們在上面了解了什麼是響應式布局，那在我們的實際項目中應該怎麼去設計呢？在以往我們設計網站的時候都會受到不同瀏覽器的兼容性的困擾，還要來個不同尺寸設備，我們該怎麼淡定下來呢？有需求就會有解決方案，說到響應式布局，就不得不提起CSS3中的Media Query（媒介查詢），這可是個好東西，易用、強大、快捷……Media Query是製作響應式布局的一個利器，使用這個工具，我們可以非常方便快捷的製造出各種豐富的實用性強的界面。接下來就一起來深入的了解Media Query。
1、CSS3中的Media Query（媒介查詢）是什麼？
通過不同的媒介類型和條件定義樣式表規則。媒介查詢讓CSS可以更精確作用於不同的媒介類型和同一媒介的不同條件。媒介查詢的大部分媒介特性都接受min和max用於表達」大於或等於」和」小於或等於」。如：width會有min-width和max-width媒介查詢可以被用在CSS中的@media和@import規則上，也可以被用在HTML和XML中。通過這個標簽屬性，我們可以很方便的在不同的設備下實現豐富的界面，特別是移動設備，將會運用更加的廣泛。
2、media query能夠獲取哪些值？
設備的寬和高device-width，device-height顯示屏幕/觸覺設備。
渲染窗口的寬和高width，height顯示屏幕/觸覺設備。
設備的手持方向，橫向還是豎向orientation（portrait|lanscape）和列印機等。
畫面比例aspect-ratio點陣列印機等。
設備比例device-aspect-ratio-點陣列印機等。
對象顏色或顏色列表color，color-index顯示屏幕。
設備的解析度resolution。
3、語法結構及用法
@media 設備名 only （選取條件） not （選取條件） and（設備選取條件），設備二{sRules}
示例一：在link中使用@media：
<link rel=「stylesheet」 type=「text/css」 media=「only screen and （max-width： 480px），only screen and （max-device-width： 480px）」 href=「link.css」/>
上面使用中only可省略，限定於計算機顯示器，第一個條件max-width是指渲染界面最大寬度，第二個條件max-device-width是指設備最大寬度。
示例二：在樣式表中內嵌@media：
@media （min-device-width:1024px） and （max-width:989px），screen and （max-device-width:480px），（max-device-width:480px） and （orientation:landscape），（min-device-width:480px） and （max-device-width:1024px） and （orientation:portrait） {srules}
在示例二中，設置了電腦顯示器解析度（寬度）大於或等於1024px（並且最大可見寬度為989px）；屏寬在480px及其以下手持設備；屏寬在480px以及橫向（即480尺寸平行於地面）放置的手持設備；屏寬大於或等於480px小於1024px以及垂直放置設備的css樣式。
從上面的例子可以看出，字元間以空格相連，選取條件包含在小括弧內，srules為兼容設置的樣式表，包含在中括弧裡面。only（限定某種設備，可省略），and（邏輯與），not（排除某種設備）為邏輯關鍵字，多種設備用逗號分隔，這一點繼承了css基本語法。

通過Media Queries實現響應式布局設計
好了，我們明白了什麼是Media Query，那我們一起來運用到響應式布局的設計項目中去。設計思路很簡單，首先先定義在標准瀏覽器下的固定寬度（假如標准瀏覽器的解析度為1024px，那麼我們設置寬為980px），然後用Media Query來監測瀏覽器的尺寸變化，當瀏覽器的解析度小於1024px的時候，則通過Media Query預設的樣式表來將頁面的寬度設置為百分比顯示，這樣子頁面的結構元素就會根據瀏覽器的的尺寸來進行相對應的調整。同理，當瀏覽器的可視區域改變到某個值（假如為650px）的時候，頁面的結構元素根據Media Query預設的層疊樣式表來進行相對應的調整。看看我們的例子：
/* 當瀏覽器的可視區域小於980px */
@media screen and （max-width： 980px） {
#wrap {width： 90%; margin:0 auto;}
#content {width： 60%;padding： 5%;}
#sidebar {width： 30%;}
#footer {padding： 8% 5%;margin-bottom： 10px;}
}
/* 當瀏覽器的可視區域小於650px */
@media screen and （max-width： 650px） {
#header {height： auto;}
#searchform {position： absolute;top： 5px;right： 0;}
#content {width： auto; float： none; margin： 20px 0;}
#sidebar {width： 100%; float： none; margin： 0;}
}
通過上面我們就可以監測瀏覽器的可視區域變化的時候我們的頁面結構元素也會相對應的變化，當然你可以再多設置幾個尺寸的監測層疊樣式表，這樣子就可以根據不同尺寸設備來進行響應式的布局。為了更好的顯示效果，我們往往還要格式化一些CSS屬性的初始值：
/* 禁用iPhone中Safari的字型大小自動調整 */
html {
-webkit-text-size-adjust： none;
}
/* 設置HTML5元素為塊 */
article， aside， details， figcaption， figure， footer， header， hgroup， menu， nav， section {
display： block;
}
/* 設置圖片視頻等自適應調整 */
img {
max-width： 100%;
height： auto;
width： auto\9; /* ie8 */
}
.video embed， .video object， .video iframe {
width： 100%;
height： auto;
}
最後要注意的是在頁面的頭部<head></head>之間加上下面這句∶
<meta name=「viewport」 content=「width=device-width; initial-scale=1.0」>
meta viewport這個屬性是在移動設備上設置原始大小顯示和是否縮放的聲明。
參數設置∶
width – viewport的寬度
height – viewport的高度
initial-scale – 初始的縮放比例
minimum-scale – 允許用戶縮放到的最小比例
maximum-scale – 允許用戶縮放到的最大比例
user-scalable – 用戶是否可以手動縮放

6、如何實現網頁的響應式布局

不用那麼那麼麻煩的，這個可以使用nicebox來搞，希望可以幫到你。

7、什麼是響應式布局網站

先來說說什麼是響應式的網站呢，我們通過搜索網路得知，響應式Web設計(Responsive Web design)的理念是：集中創建頁面的圖片排版大小，可以智能地根據用戶行為以及使用的設備環境（系統平台、屏幕尺寸、屏幕定向等）進行相對應的布局。這下大家應該明白了吧，就是我們設計的網站在針對電腦，手機，還有一些智能設備的時候都能正常的瀏覽。不需另建單獨的網址，一個頁面適用於所有的設備，即自適應功能，可以自動識別屏幕寬度、並做出相應調整的網頁。如今，這種響應式網站設計已經成為時代的潮流了。

下面我們帶大家了解一下響應式網站設計的優缺點
1、更加方便維護和工作
以有我們一般要做一個電腦網站，想讓我們的電腦網站能在手機上面正常打開，要開發一個獨立的移動網站，會增加你的工作負擔。實際上你就擁有了兩個獨立網站。如果你有一個響應式網站，維護的成本將會很小，因為它只有一個布局，且可工作在所有類型的設備上，而這可以明顯地減少你的工作量。當然成本方面可能也就大大減少。

2、積累分享
響應式網站設計可以讓你通過單一的URL地址收集所有的社交分享鏈接。你可以為創建更好、更友好的網站而做出積極貢獻。

3、用戶友好
　響應式的網站設計能夠對用戶產生友好度，並且對於不同的解析度能夠靈活的進行操作應用。同時還可以進行收集分享，我們可以通過網站中這些單一的網站URL地址把那些社交分享鏈接收集起來。
小微企業用微企點自助建站，真響應。

8、什麼是響應式網站模板？

頁面的設計與開發應當根據用戶行為以及設備環境進行相應的響應和調整。具體的實踐方式由多方面組成，包括彈性網格和布局、圖片、CSS media query的使用等。無論用戶正在使用筆記本還是iPad，我們的頁面都應該能夠自動切換解析度、圖片尺寸及相關腳本功能等，以適應不同設備；換句話說，頁面應該有能力去自動響應用戶的設備環境。響應式頁面設計就是一個網站能夠兼容多個終端，而不是為每個終端做一個特定版本。

9、靜態、自適應、流式、響應式四種網頁布局有什麼區別？

1、靈活性不同：

靜態布局：毫無靈活性可言，目前已逐漸被淘汰。

自適應布局：靜態布局的升級版，因其強大的靈活性，已逐漸成為高端網頁的代名詞。

流式布局：靈活性更高，可適用於其他三種網站布局。

響應式布局：自適應布局的升級版，響應式網站要普遍適應市面上各類屏幕，開發難度和工作量都是非常大的，開發價格自然比普通網站高。

2、設計方法不同：

靜態布局：居中布局，所有樣式使用絕對寬度/高度(px)，設計一個Layout，在屏幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分。 

自適應布局：使用 @media 媒體查詢給不同尺寸和介質的設備切換不同的樣式。

流式布局：使用百分比定義寬度，高度大都是用px來固定，可以根據可視區域 (viewport) 和父元素的實時尺寸進行調整，盡可能的適應各種解析度。

響應式布局：媒體查詢+流式布局。使用@media媒體查詢和網格系統配合相對布局單位進行布局，就是綜合響應式、流動等上述技術通過 CSS 給單一網頁不同設備返回不同樣式的技術統稱。

(9)響應式布局模板站長之家擴展資料：

靜態、自適應、流式、響應式四種網頁布局的特點概括

1、靜態布局：即傳統Web設計，網頁上的所有元素的尺寸一律使用px作為單位。不管瀏覽器尺寸具體是多少，網頁布局始終按照最初寫代碼時的布局來顯示。

2、流式布局：頁面元素的寬度按照屏幕解析度進行適配調整，但整體布局不變。這就導致如果屏幕太大或者太小都會導致元素無法正常顯示。

3、自適應布局：分別為不同的屏幕解析度定義布局，即創建多個靜態布局，每個靜態布局對應一個屏幕解析度范圍。

4、響應式布局：分別為不同的屏幕解析度定義布局，同時，在每個布局中，應用流式布局的理念，即頁面元素寬度隨著窗口調整而自動適配。

10、HTML中怎樣的布局方式稱為響應式布局？

借用百科一句話：響應式布局是Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。這個概念是為解決移動互聯網瀏覽而誕生的。
響應式布局就是可以，適應多種設備的網頁，比如電腦端和移動端 可以共用同一套CSS。不需要為單獨的設備而開發相應程序