深入剖析響應式佈局的原理

說到響應式佈局，相信大家都有一定的了解，響應式佈局是今年很流行的一個設計理念，隨著移動互聯網的盛行，為解決如今各式各樣的瀏覽器分辨率以及不同移動 設備的顯示效果，設計師提出了響應式佈局的設計方案。今天就和大家來講講響應式佈局這件小事，包含什麼是響應式佈局、響應式佈局的優點和缺點以及響應式布 局該怎麼設計（透過CSS3 Media Query實現響應式佈局）。 　　

響應式佈局顧名思義就是隨電腦螢幕的大小而改變，響應式佈局就是用不同的終端來查看頁面，可以根據不同的大小來顯示頁面。響應式佈局又優點，也有缺點，優點是：面對不同解析度設備彈性強。能夠快速解決多設備顯示適應問題。缺點：相容於各種裝置工作量大，效率低下，程式碼累贅，會出現一些隱藏無用的元素 ，載入時間長，響應式佈局也是一種程度上折衷性質的設計解決方案，多方面因素影響而達不到最佳效果，某種程度上改變了網站原有的佈局結構，會出現用戶混淆的情況。這就是響應式佈局。

首先我們先來認識一下什麼是 media屬性吧

@media screen and (min-width: 320px) and (max-width : 479px)

就從這個條件語句開始介紹，media屬性後面跟著的是一個 screen 的媒體類型（上面說過的十種媒體類型之一）。然後用and 關鍵字來連接條件，然後括號裡就是一個媒體查詢語句，稍微懂點css的同學都能看懂，這個條件語句意思是在大於320320 479 的分辨率下所啟動的樣式表。

這個語句就是響應式佈局的基礎應用了，在給它賦予不同的值就能在不同的大小螢幕上顯示了。 我們在上面了解了什麼是響應式佈局，那在我們的實際項目中應該怎麼去設計呢?在以往我們設計網站的時候都會受到不同瀏覽器的兼容性的困擾，現在還要來不同尺寸設備，我們該怎麼淡定呢?有需求就會有解決方案，呵呵，說到響應式佈局，就不得不提起CSS3中的iaMed Queryia Queryia Queryia Query媒介查詢），這可是個好東西，易用、強大、快速……Media Query是製作響應式佈局的一個利器，使用這個工具，我們可以非常方便快捷的製造出各種豐富的實用性強的介面。接下來就一起來深入的了解Media Query。透過不同的媒體類型和條件定義樣式表規則。媒體查詢讓CSS可以更精確地作用於不同的媒體類型和同一媒體的不同條件。媒體查詢的大部分媒體特性都接受min和max用於表達”大於或等於”和”小與或等於和”小與或等於和”小與或等於min-width和max-width媒體查詢可以用在CSS和@media和@import規則上，也可以用在X和HTML和HTML。透過這個標籤屬性，我們可以很方便的在不同的設備下實現豐富的介面，特別是移動設備，

將會運用更加的廣泛。要學會

meidia query查詢。 所以響應式佈局在html

中是一個非常一個不錯的設計理念，響應式佈局給大家帶來了許多的方便，讓大家在不同的設備中也能看一些頁面。

 

 

🎜🎜