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

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

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

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

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

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

這個語句就是響應式佈局的基礎應用了，在給它賦予不一樣的值就能在不一樣的大小屏幕上顯示了。 咱們在上面瞭解了什麼是響應式佈局，那在咱們的實際項目中應該怎麼去設計呢?在以往咱們設計網站的時候都會受到不一樣瀏覽器的兼容性的困擾，如今還要來個不一樣尺寸設備，咱們該怎麼淡定下來呢?有需求就會有解決方案，呵呵，說到響應式佈局，就不得不提起CSS3中的Media Query（媒介查詢），這但是個好東西，易用、強大、快捷……Media Query是製做響應式佈局的一個利器，使用這個工具，咱們能夠很是方便快捷的製造出各類豐富的實用性強的界面。接下來就一塊兒來深刻的瞭解Media Query。經過不一樣的媒體類型和條件定義樣式表規則。媒體查詢讓CSS能夠更精確做用於不一樣的媒體類型和同一媒體的不一樣條件。媒體查詢的大部分媒體特性都接受min和max用於表達」大於或等於」和」小與或等於。如：width會有min-width和max-width媒體查詢能夠被用在CSS中的@media和@import規則上，也能夠被用在HTML和XML中。經過這個標籤屬性，咱們能夠很方便的在不一樣的設備下實現豐富的界面，特別是移動設備，將會運用更加的普遍。因此使用響應式媒體對象，就必定要學會meidia query查詢。

因此響應式佈局在html中是一個很是一個不錯的設計理念，響應式佈局給你們帶來了許多的方便，讓你們在不一樣的設備中也能看一些頁面。