關於響應式、媒體查詢和media的關係 、流媒體佈局flex 和em rem像素的使用 我有一些廢話要講.....

1、什麼是響應式
隨着移動端越來遇火 網站的佈局成爲一個熱議的話題 有的人喜歡用手機瀏覽網站、有的人喜歡用paid瀏覽網站、有人喜歡用電腦瀏覽網站 那麼問題來了 咱們怎麼樣才能使用一套css樣式 完成三種終端的適配呢 萬維組織(W3c)牽腸掛肚 終於提出了一種能夠兼容各個終端的頁面佈局樣式語法 交給瀏覽器判斷試用用戶終端的寬度、高度、像素密度等等從而達到屏幕有多寬頁面就有多寬字體大小不會受終端影響頁面佈局不會錯亂掉這就是響應式
2、media響應式的罪魁禍首 -- 被我發現了
1)、點開有道詞典或者百度翻譯 輸入media 譯文一欄 赤裸裸的顯示着「媒體」兩個字 因而乎 media的中文意思是媒體咱們又用它來查詢終端的設備信息 故賜名「媒體查詢」.....  

正所謂媒體查詢 查詢設備信息 那必定不僅是屏幕寬的問題了 因此咱們扒開它的外衣一探究竟media可查詢的設備信息和工做原理都有什麼

 

2)、media的寫法&&兼容性&&支持查詢設備的信息有哪些

當media出如今咱們的link標籤中或是css樣式表中咱們的終端設備一解析 內心 捉摸着主人(開發程序員)這是要鬧那樣 打算給這個網站穿上什麼外衣 我該怎麼執行呢因而 media就須要進行進一步判斷 看看我身後的關鍵字是什麼 若是是screen 判斷屏幕瀏覽器 若是是all 那就是用於全部設備了額 media支持的設備信息屬性詳情參見網址 http://www.runoob.com/cssref/css3-pr-mediaquery.html 特別注意 media 也能夠用於 link標籤中判斷信息成立加載響應的css文件 說到這不得不說說 <meta name='viewport' content='width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no'/>這貨的做用 老辦法打開有道 輸入viewport 經翻譯 是視窗的意思 因此是我猜他是瀏覽器的視窗的意思 device-width是設備寬度的意思 若是想查詢高度 height=device-height、initial-scale是初始化頁面大小的意思maximum-scale是最大的視圖的意思user-scalable是用戶是否能夠進行縮放 這樣一來一個響應式網站視覺原理就在這種狀況下完成了 固然內行看門道外行看熱鬧 想要更快更好的實現響應式網站的實現內部的css仍是大有研究的好比 width:100%; 會和父容器的寬度相一致只要視口大小做調整 寬度被設置爲100%的子元素就會作出相應的改變後來萬維黨H5小組合夥研究者我們出一個新屬性吧讓他的width:100%;變得更強大，哥幾個一拍巴掌合計着成就這樣flex(伸縮盒)也橫空出世了

 

3、flex的使用規則

  flex 中文翻譯過來是伸縮盒子的意思 主要應用在響應式網站佈局上面是響應式佈局變的簡單 

 3.1）flex使用規則

  設置父元素爲display:flex;若是想設置元素的排列方向呢是自上而下仍是自下而上呢是從左到右呢仍是從右至左呢只須要設置屬性flex-direction:row|column;flex-flow: flex-direction flex-wrap|initial|inherit;  若我表述的不是很清楚請看文章 http://www.runoob.com/cssref/css3-pr-flex-flow.html

阮大叔的 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 文章  

還有css88的  http://www.css88.com/book/css/properties/flexible-box/index.htm

　　　　　　 http://www.css88.com/book/css/properties/flex/index.htm

就不信整不會你。。。。。

 

最後讓我再說說這個移動端像素單位 em rem 的區別

em:取值不固定會繼承父元素的大小進行改變
rem:取值不固定按照html，body元素大小進行改變
想要統一字體大小 html或body元素css樣式設置字體大小成62.5% 空口無憑 貼圖證實 以下圖

 

另附：em rem px 在線字體換算網址 http://pxtoem.com/