WEB前端中rem單位的應用（一）

在最近的開發和之前的的使用中，我們一般面對需要適應多端的項目或者需要移動端多設備的適應，都可能會引入rem，em這樣的單位。

如果你要着手一個以上類似的項目，我們也同樣建議使用rem或者干脆引入框架，等到你分析框架時，

你會發現，有些成熟的框架也是借助rem來解決不同的屏幕大小帶來的適應問題。

接下來我們就簡單的闡述一下我最近在項目中如何使用rem：

首先我們要明確，為什么要使用rem，那我們要先從rem開始介紹。

什么是 rem？

我們從css中可以得到對它最精簡的介紹翻譯：

rem是相對長度單位。相對於根元素(即html元素) font-size 計算值的倍數

從上面的通用介紹里我們已經知道了rem到底是什么東西了，然后我們應該如何借助它的力量呢？

既然他可以跟隨根元素相對變化，那也就是說如果我們能夠讓根元素的font-size動態變化，

就能夠實現，使用一套大小，實現多端多設備的單位長度的適應問題。

那這個rem的使用會轉化為一個如何讓根元素的font-size動態變化問題。拿我最近在用的一套比例來說明。

/*dpi*/
/* for 1080+ px width screen */
/* for 1080 px width screen */
/* for 800 px width screen */
/* for 800 px width screen */
@media only screen and (min-width: 751px) { html, body { font-size: 31.25px; } }
/* for 800 px width screen */
@media only screen and (max-width: 750px) { html, body { font-size: 31.25px; } }
/* for 720 px width screen */
@media only screen and (max-width: 720px) { html, body { font-size: 30px; } }
/* for 640 px width screen */
@media only screen and (max-width: 640px) { html, body { font-size: 27px; } }
/* for 540 px width screen */
@media only screen and (max-width: 540px) { html, body { font-size: 22.5px; } }
/* for 480 px width screen */
@media only screen and (max-width: 480px) { html, body { font-size: 20px; } }
/* for 450 px width screen */
@media only screen and (max-width: 450px) { html, body { font-size: 18.9px; } }
/* for 414 px width screen */
@media only screen and (max-width: 414px) { html, body { font-size: 17.25px; } }
/* for 375 px width screen */
@media only screen and (max-width: 375px) { html, body { font-size: 15.625px; } }
/* for 320 px width screen */
@media only screen and (max-width: 320px) { html, body { font-size: 13.5px; } }

 以上就是一個較為全面的fontSize的動態變化案例了，其中800px以上屏幕可再細致划分，只要你懂這套媒體查詢代碼的原理即可。

如果說看到這里，你對媒體查詢有些困惑，那我猜你一定連Bootstrap都沒有用過，或者你只知道如何用，卻從來沒有分析過她的原理。

我們可以利用接下來的幾分鍾簡單的介紹下媒體查詢。

接下來我來引用一段菜鳥教程里的解釋：

使用 @media 查詢，你可以針對不同的媒體類型定義不同的樣式。

@media 可以針對不同的屏幕尺寸設置不同的樣式，特別是如果你需要設置設計響應式的頁面，@media 是非常有用的。

當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。

其實看到這里對於這個概念還是不明確，並且媒體查詢中包含很多關鍵字，那我們常用的有 and not only

only關鍵字防止老舊的瀏覽器不支持帶媒體屬性的查詢而應用到給定的樣式

and關鍵字用於合並多個媒體屬性或合並媒體屬性與媒體類型

not關鍵字應用於整個媒體查詢，在媒體查詢為假時返回真

舉個簡單的例子：

/*媒體查詢支持最大寬度為320px應用以下CSS html body 的fontsize設置為13.5px*/
@media only screen and (max-width: 320px) { html, body { font-size: 13.5px; } }

其中max 或者 min 代表了最小 或者 最大的概念

利用幾個關鍵字我們可以輕松的自定義出來我們所需要的媒體查詢條件

以上就是今天的rem實現適應多端的方法之一

 

 

ps：其實現在講這個的非常多，我就是來大姨媽太痛苦了，實在是想不到該干啥，

就隨便寫點分分心，我要疼死了，現在好多了，emmmm下次見，還有下次的話

資料查詢：

http://www.runoob.com/cssref/css3-pr-mediaquery.html

https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries