響應式佈局是Ethan Marcotte在2010年5月份提出的一個概念,簡而言之,就是一個網站可以兼容多個終端——而不是爲每一個終端作一個特定的版本。這個概念是爲解決移動互聯網瀏覽而誕生的。css
響應式佈局能夠爲不一樣終端的用戶提供更加溫馨的界面和更好的用戶體驗,並且隨着目前大屏幕移動設備的普及,用大勢所趨來形容也不爲過。隨着愈來愈多的設計師採用這個技術,咱們不只看到不少的創新,還看到了一些成形的模式。瀏覽器
咱們在上面瞭解了什麼是響應式佈局,那在咱們的實際項目中應該怎麼去設計呢?在以往咱們設計網站的時候都會受到不一樣瀏覽器的兼容性的困擾,如今還要來個不一樣尺寸設備,咱們該怎麼淡定下來呢?有需求就會有解決方案,說到響應式佈局,就不得不提起CSS3中的Media Query
(媒介查詢),這但是個好東西,易用、強大、快捷……Media Query
是製做響應式佈局的一個利器,使用這個工具,咱們能夠很是方便快捷的製造出各類豐富的實用性強的界面。接下來就一塊兒來深刻的瞭解Media Query
。工具
經過不一樣的媒體類型和條件定義樣式表規則。媒體查詢讓CSS能夠更精確做用於不一樣的媒體類型和同一媒體的不一樣條件。媒體查詢的大部分媒體特性都接受min
和max
用於表達」大於或等於」和」小與或等於」。如:width會有min-width
和max-width
媒體查詢能夠被用在CSS中的@media
和@import
規則上,也能夠被用在HTML和XML中。經過這個標籤屬性,咱們能夠很方便的在不一樣的設備下實現豐富的界面,特別是移動設備,將會運用更加的普遍。佈局
@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:code
@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基本語法。繼承