關(guān)于響應(yīng)式、媒體查詢和media的關(guān)系、流媒體布局flex和emrem像素的使用我有一些廢話要講.....-喬仁杰

一、什么是響應(yīng)式
隨著移動(dòng)端越來遇火 網(wǎng)站的布局成為一個(gè)熱議的話題 有的人喜歡用手機(jī)瀏覽網(wǎng)站、有的人喜歡用paid瀏覽網(wǎng)站、有人喜歡用電腦瀏覽網(wǎng)站 那么問題來了 我們?cè)趺礃硬拍苁褂靡惶譪ss樣式 完成三種終端的適配呢 萬(wàn)維組織(W3c)朝思暮想 終于提出了一種可以兼容各個(gè)終端的頁(yè)面布局樣式語(yǔ)法 交給瀏覽器判斷試用用戶終端的寬度、高度、像素密度等等從而達(dá)到屏幕有多寬頁(yè)面就有多寬字體大小不會(huì)受終端影響頁(yè)面布局不會(huì)錯(cuò)亂掉這就是響應(yīng)式
二、media響應(yīng)式的罪魁禍?zhǔn)?-- 被我發(fā)現(xiàn)了
1)、點(diǎn)開有道詞典或者百度翻譯 輸入media 譯文一欄 赤裸裸的顯示著“媒體”兩個(gè)字 于是乎 media的中文意思是媒體我們又用它來查詢終端的設(shè)備信息 故賜名“媒體查詢”.....

正所謂媒體查詢 查詢?cè)O(shè)備信息 那一定不只是屏幕寬的問題了 所以我們扒開它的外衣一探究竟media可查詢的設(shè)備信息和工作原理都有什么

2)、media的寫法&&兼容性&&支持查詢?cè)O(shè)備的信息有哪些

當(dāng)media出現(xiàn)在我們的link標(biāo)簽中或是css樣式表中我們的終端設(shè)備一解析 心里 捉摸著主人(開發(fā)程序員)這是要鬧那樣 打算給這個(gè)網(wǎng)站穿上什么外衣 我該怎么執(zhí)行呢于是 media就需要進(jìn)行進(jìn)一步判斷 看看我身后的關(guān)鍵字是什么 如果是screen 判斷屏幕瀏覽器 如果是all 那就是用于所有設(shè)備了額 media支持的設(shè)備信息屬性詳情參見網(wǎng)址 http://www.runoob.com/cssref/css3-pr-mediaquery.html 特別注意 media 也可以用于 link標(biāo)簽中判斷信息成立加載響應(yīng)的css文件 說到這不得不說說 這貨的作用 老辦法打開有道 輸入viewport 經(jīng)翻譯 是視窗的意思 所以是我猜他是瀏覽器的視窗的意思 device-width是設(shè)備寬度的意思 如果想查詢高度 height=device-height、initial-scale是初始化頁(yè)面大小的意思maximum-scale是最大的視圖的意思user-scalable是用戶是否可以進(jìn)行縮放 這樣一來一個(gè)響應(yīng)式網(wǎng)站視覺原理就在這種情況下完成了 當(dāng)然內(nèi)行看門道外行看熱鬧 想要更快更好的實(shí)現(xiàn)響應(yīng)式網(wǎng)站的實(shí)現(xiàn)內(nèi)部的css還是大有研究的比如 width:100%; 會(huì)和父容器的寬度相一致只要視口大小作調(diào)整 寬度被設(shè)置為100%的子元素就會(huì)做出相應(yīng)的改變后來萬(wàn)維黨H5小組合伙研究者咱們出一個(gè)新屬性吧讓他的width:100%;變得更強(qiáng)大，哥幾個(gè)一拍巴掌合計(jì)著成就這樣flex(伸縮盒)也橫空出世了

三、flex的使用規(guī)則

flex 中文翻譯過來是伸縮盒子的意思 主要應(yīng)用在響應(yīng)式網(wǎng)站布局上面是響應(yīng)式布局變的簡(jiǎn)單

3.1）flex使用規(guī)則

設(shè)置父元素為display:flex;如果想設(shè)置元素的排列方向呢是自上而下還是自下而上呢是從左到右呢還是從右至左呢只需要設(shè)置屬性flex-direction:row|column;flex-flow: flex-direction flex-wrap|initial|inherit; 若我表述的不是很清楚請(qǐng)看文章 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

就不信整不會(huì)你。。。

最后讓我再說說這個(gè)移動(dòng)端像素單位 em rem 的區(qū)別

em:取值不固定會(huì)繼承父元素的大小進(jìn)行改變
rem:取值不固定按照html，body元素大小進(jìn)行改變
想要統(tǒng)一字體大小 html或body元素css樣式設(shè)置字體大小成62.5% 空口無憑 貼圖證明 如下圖

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

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com