如何實現響應式佈局？

時間 2019-11-17

標籤如何實現響應佈局简体版

原文原文鏈接

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

響應式佈局能夠爲不一樣終端的用戶提供更加溫馨的界面和更好的用戶體驗，並且隨着目前大屏幕移動設備的普及，用「大勢所趨」來形容也不爲過。隨着愈來愈多的設計師採用這個技術，咱們不只看到不少的創新，還看到了一些成形的模式。

優勢：
面對不一樣分辨率設備靈活性強
可以快捷解決多設備顯示適應問題
缺點：
兼容各類設備工做量大，效率低下
代碼累贅，會出現隱藏無用的元素，加載時間加長
其實這是一種折中性質的設計解決方案，多方面因素影響而達不到最佳效果
必定程度上改變了網站原有的佈局結構，會出現用戶混淆的狀況css

設計思路：瀏覽器

咱們在上面瞭解了什麼是響應式佈局，那在咱們的實際項目中應該怎麼去設計呢？在以往咱們設計網站的時候都會受到不一樣瀏覽器的兼容性的困擾，還要來個不一樣尺寸設備，咱們該怎麼淡定下來呢？有需求就會有解決方案，說到響應式佈局，就不得不提起CSS3中的Media Query（媒介查詢），這但是個好東西，易用、強大、快捷……Media Query是製做響應式佈局的一個利器，使用這個工具，咱們能夠很是方便快捷的製造出各類豐富的實用性強的界面。接下來就一塊兒來深刻的瞭解Media Query。

一、CSS3中的Media Query（媒介查詢）是什麼？

經過不一樣的媒介類型和條件定義樣式表規則。媒介查詢讓CSS能夠更精確做用於不一樣的媒介類型和同一媒介的不一樣條件。媒介查詢的大部分媒介特性都接受min和max用於表達」大於或等於」和」小於或等於」。如：width會有min-width和max-width媒介查詢能夠被用在CSS中的@media和@import規則上，也能夠被用在HTML和XML中。經過這個標籤屬性，咱們能夠很方便的在不一樣的設備下實現豐富的界面，特別是移動設備，將會運用更加的普遍。

二、media query可以獲取哪些值？

設備的寬和高device-width，device-height顯示屏幕/觸覺設備。

渲染窗口的寬和高width，height顯示屏幕/觸覺設備。

設備的手持方向，橫向仍是豎向orientation（portrait|lanscape）和打印機等。

畫面比例aspect-ratio點陣打印機等。

設備比例device-aspect-ratio-點陣打印機等。

對象顏色或顏色列表color，color-index顯示屏幕。

設備的分辨率resolution。

三、語法結構及用法

@media 設備名 only （選取條件） not （選取條件） and（設備選取條件），設備二{sRules}

示例一：在link中使用@media：

上面使用中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基本語法。

http://baike.baidu.com/link?url=E-oB351JGSZ7yAwRm_mZupT4IJ3tvcPbGwLFmAubVGrvHkYWk_AICQQWiLt9xafdMeWjpK8vaKyT30UXagr0va