手機端rem如何適配 rem詳解及使用方法

2021-09-07 09:49:29 字數 1364 閱讀 1837

什麼是rem

在我看來,rem就是1rem單位就等於html節點fontsize的畫素值。所以改變html節點的fontsize是最為關鍵的一步。根據手機寬度改變相對大小就可以實現自適應了,就不用什麼**查詢那些的。

我們的設計圖往往寬度是640或者其他尺寸的,不過我建議是用這個尺寸,以640為基準,以小到大,實現自適應,下面實現的比例為1rem=40px(640寬度)。

為什麼這樣搞?

這樣一套**就搞定手機端尺寸自適應,不需要**查詢,而且利用sass和less能夠給我們節約更多的時間,以及更好的體驗。

首先,先說乙個常識,瀏覽器的預設字型高都是16px。步入正題-----〉

目前,ie9+,firefox、chrome、safari、opera 的主流版本都支援了rem。

就算對不支援的瀏覽器,應對方法也很簡單,就是多寫乙個絕對單位的宣告。這些瀏覽器會忽略用rem設定的字型大小。

css中的body中先全域性宣告font-size=62.5%,這裡的%的演算法和rem一樣。

因為100%=16px,1px=6.25%,所以10px=62.5%,

這是的1rem=10px,所以12px=1.2rem。px與rem的轉換通過10就可以得來,很方便了吧!

注意,rem是只相對於根元素htm的font-size,即只需要設定根元素的font-size,其它元素使用rem單位設定成相應的百分比即可;

例子:

1 /*16px * 312.5% = 50px;*/

2 html

1 /*50px * 0.5 = 25px;*/

2 body

一般情況下,是這樣子使用的

1 html 

2 body

3 p

用乙個東西肯定要知道它的好處啦,由於其他字型大小都是基於html的,所以在移動端做適配的時候,可以使用這樣的方法

1 @media only screen and (min-width: 320px)

5 }6 @media only screen and (min-width: 640px)

10 }

11 @media only screen and (min-width: 750px)

15 }

16 @media only screen and (min-width: 1242px)

20 }

這樣子就能做到僅僅改變html的字型大小,讓其他字型具有「響應式」啦。

又是午睡時間,如果本文有不正確的地方,請指出^_^

手機端rem如何適配 rem詳解及網頁自適應

什麼是rem 在我看來,rem就是1rem單位就等於html節點fontsize的畫素值。所以改變html節點的fontsize是最為關鍵的一步。根據手機寬度改變相對大小就可以實現自適應了,就不用什麼 查詢那些的。我們的設計圖往往寬度是640或者其他尺寸的,不過我建議是用這個尺寸,以640為基準,以...

手機端rem如何適配 rem詳解及使用方法2

作為乙個前端開發人員,我們的任務是將ui設計師的圖稿運用計算機語言呈現在使用者面前。而現在的裝置大小尺寸不一,近年來智慧型手機的普及更是讓網頁的使用者大部分 與手機,所以讓不同大小的移動端螢幕都能較好的還原設計稿就成了乙個前端開發者需要解決的當務之急。我查閱了大量資料和進行了一些實踐,下面是我對移動...

手機端rem如何適配 rem詳解及使用方法

什麼是rem 在我看來,rem就是1rem單位就等於html節點fontsize的畫素值。所以改變html節點的fontsize是最為關鍵的一步。根據手機寬度改變相對大小就可以實現自適應了,就不用什麼 查詢那些的。我們的設計圖往往寬度是640或者其他尺寸的,不過我建議是用這個尺寸,以640為基準,以...