響應式網站設計布局_什麼是響應式網頁布局

1、響應式布局該怎麼設計

三、響應式布局該怎麼設計?
那在我們的實際項目中應該怎麼去設計呢?在以往我們設計網站的時候都會受到不同瀏覽器的兼容性的困擾，現在還要來個不同尺寸設備，我們該怎麼淡定下來呢?有需求就會有解決方案，呵呵，說到響應式布局，就不得不提起CSS3中的Media Query（媒介查詢），這可是個好東西，易用、強大、快捷……Media Query是製作響應式布局的一個利器，使用這個工具，我們可以非常方便快捷的製造出各種豐富的實用性強的界面。接下來就一起來深入的了解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 – 用戶是否可以手動縮放
最後對於在IE瀏覽器中不支持media query的情況，我們可以使用Media Query JavaScript來解決，只需要在頁面頭部引用css3-mediaqueries.js即可。示例：

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

1、靈活性不同：

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

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

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

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

2、設計方法不同：

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

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

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

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

(2)響應式網站設計布局擴展資料：

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

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

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

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

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

3、響應式設計中怎樣布局

以流動布局和rem以及CSS3媒體查詢來布局，如果單純適配手機端的話，一般一套設計圖就可以了，使用rem，字體大小和圖片都可以根據屏幕進行縮放，以下是Javascript代碼。

(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 20 * (clientWidth / 1400) + 'px';
};

if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

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

響應式復布局是Ethan Marcotte在2010年5月份提出的制一個概念，簡而言之，就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。這個概念是為解決移動互聯網瀏覽而誕生的。

響應式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗，而且隨著目前大屏幕移動設備的普及，用「大勢所趨」來形容也不為過。隨著越來越多的設計師採用這個技術，不僅看到很多的創新，還看到了一些成形的模式。

優點：

面對不同解析度設備靈活性強

能夠快捷解決多設備顯示適應問題

缺點：

兼容各種設備工作量大，效率低下

代碼累贅，會出現隱藏無用的元素，載入時間加長

其實這是一種折中性質的設計解決方案，多方面因素影響而達不到最佳效果

一定程度上改變了網站原有的布局結構，會出現用戶混淆的情況

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

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

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

響應式布局，稱為Responsive Web Design。它是將已有的開發技巧（彈性網格布局、彈性圖回片、媒體和媒體查詢答）整合起來，針對任意設備對網頁內容進行「完美」布局的一種顯示機制。簡言之，是一個網站能夠兼容多個終端（手機、Pad、電腦）的布局方法，而不需要為每個終端書寫一套特定版本的代碼。

資料來源：《HTML5布局之路》

7、響應式網站建設的布局類型有哪幾種

響應式網站是網站的一種展示形式，具體的布局類型跟普通意義的網站沒多大區別:
品牌展示型
營銷型
博客
門戶
等等等等
普通網站的類型響應式基本都可以實現，具體要看架構布局水平了！

導航:首頁 > 萬維百科 > 響應式網站設計布局

響應式網站設計布局

與響應式網站設計布局相關的知識