媒體查詢以及flexbox，響應式圖片

　　媒體查詢包含媒體類型和零個或多個檢測媒體特性的表達式。width.height和color都是可用於媒體查詢的特性。使用媒體查詢，能夠沒必要修改內容自己，而讓網頁適應不一樣的設備。

　　 媒體查詢的使用方式：在css文件輸入@media screen。在Link標籤中使用媒體查詢。<link rel="style sheet" type="text/css" media="screen" href="screenstyles.css">。組合媒體查詢：能夠將多個媒體查詢串在一塊兒。

　　使用Css中的@import會增長HTTP請求（進而影響加載速度），所以請慎用。

　　可使用@import導入css時使用媒體查詢，有條件地向當前樣式表中加載其餘樣式表。

　　在針對全部設備的媒體查詢中，可使用簡寫語法，即省略關鍵字all(以及緊隨其後的and）。換句話說，若是不指定關鍵字，則關鍵字就是all。

　　從瀏覽器得角度看，css屬於阻塞渲染的資源。換句話說，瀏覽器須要下載並解析連接的css文件，而後在渲染頁面。不過如今瀏覽器都很聰明，知道哪些樣式表必須當即分析，而哪些樣式能夠等到頁面初始渲染結束再處理。「【阻塞渲染】僅是指該資源是否會暫停瀏覽器得首次頁面渲染。不管CSS是否阻塞渲染，CSS資源都會被下載，只是說非阻塞性資源的優先級比較低而已。」

　　分隔媒體查詢的利弊：多一個文件就要多一次HTTP請求，在某些條件下，HTTP請求多了會明顯影響頁面加載速度。不過相對這個方面得性能提高。首先要確認的是：全部圖片都壓縮過了；全部腳本都拼接和縮短了；全部資源都採用了gzip壓縮；全部靜態內容都緩存到了CDN；全部多餘得CSS規則都被清除了。

　　最開始的時候你們使用百分比形式定義。彈性佈局。幾年後，咱們使用固定寬度。如今咱們又開始使用響應式設計。css15年初了一個新的佈局模塊叫‘彈性盒子（flexbox）’，除了用於實現彈性佈局，flexbox還能夠用來居中內容，改變標記中的源碼順序，建立使人驚豔的頁面佈局。響應式設計還有一個重要組成部分：響應式圖片。

　　有時候須要將固定像素大小轉換爲比例大小。這個轉換有一個簡單地公式，Ethan Marcotte給出：結果 = 目標/上下文。

　　行內塊、浮動、表格的缺點：行內塊佈局的最大問題，就是它會在HTML元素間渲染空白。另外說明一下，在行內塊中垂直居中也不容易。浮動有兩個問題：一：若是給浮動元素的寬度設定百分比，那麼最終計算值在不一樣平臺上的結果不同（有些瀏覽器向上取整，有的則是向下。）二：一般都要清除浮動，才能避免父盒子/元素摺疊。雖然很容易作，可是每次清除都至關於在提醒咱們：浮動並不是一個地道的佈局機制。表格與表元：須要在每一個項目外面包一層，也不能把設置爲display:table-cell項目包到多行上。

　　flexbox概述：方便地垂直居中內容。改變元素的視覺次序。在盒子裏自動插入空白以及對齊元素，自動對齊元素間的空白。autoprefixer針對各類狀況提供了不少版本。能夠找一個自動加前綴的方法。

　　完美垂直居中文本：display:flex;align-items:center;justify-content:center;display:flex;這是flexbox得根本所在。這裏就是當前元素設置爲一個Flexbox。align-items:這是要在Flexbox中沿交叉軸對齊項目。justify-content:在這裏設置內容沿主軸居中。在Flexbox中，能夠把它想象成word軟件中的一個按鈕。

　　偏移：沒有浮動，沒有行內塊，也沒有表元。在包含元素上設置display:flexbox;後，，其子元素就會變成彈性項，從而在彈性佈局模型下佈局。這裏的魔法屬性是margin-left:auto，它讓最後一項用上該側全部可用的外邊距。若是讓全部項反序排列？簡單，給包含元素的CSS加一行flex-direction:row-reverse。在包含元素中使用flex-direction:column;再把自動邊距屬性刪掉：flex-direction:column;align-items:center;padding:0 1rem;

　　Flexbox與有與inline-block和inline-table對應的inline-flex辯題。得益於它的居中能力，經過行內伸縮模型能夠輕鬆實現一些效果。