px與rem的轉換關係

2021-10-06 08:54:37 字數 1815 閱讀 2437

rem是相對於根元素,這樣就意味著,我們只需要在根元素確定乙個參考值(例如20px),這個參考值設定為多少,完全可以根據您自己的需求來定。·

在瀏覽器預設的字型大小16px的情況下,來看一些px單位與rem之間的轉換關係:

|  px  |     rem       |

------------------------

| 12 | 12/16 = .75 |

| 14 | 14/16 = .875 |

| 16 | 16/16 = 1 |

| 18 | 18/16 = 1.125 |

| 20 | 20/16 = 1.25 |

| 24 | 24/16 = 1.5 |

| 30 | 30/16 = 1.875 |

| 36 | 36/16 = 2.25 |

| 42 | 42/16 = 2.625 |

| 48 | 48/16 = 3 |

-------------------------

為了方便計算,很多框架(例如本人之前用過的amazeui)時常將在元素中設定font-size值為62.5%

相當於在中設定font-size10px,此時,上面示例中所示的值將會改變:

|  px  |     rem        |

-------------------------

| 12 | 12/10 = 1.2 |

| 14 | 14/10 = 1.4 |

| 16 | 16/10 = 1.6 |

| 18 | 18/10 = 1.8 |

| 20 | 20/10 = 2.0 |

| 24 | 24/10 = 2.4 |

| 30 | 30/10 = 3.0 |

| 36 | 36/10 = 3.6 |

| 42 | 42/10 = 4.2 |

| 48 | 48/10 = 4.8 |

-------------------------

為了適配更多的手機,你可以這樣如下邊紅色那樣寫,本人目前做的專案是這樣寫,你也可以按照自己的喜好 (解釋:乙個16px的字型,16/20=0.8rem,那麼在min-width:400px情況下0.8*21.33333333=17,以此類推,這樣子在大一點的螢幕手機下字型也就大了一點,觀感會更好)

html

@media only screen and (min-width: 400px)}

@media only screen and (min-width: 414px)}

@media only screen and (min-width: 480px)}

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

當你遇到用50px作為根元素寫完了**,公司要求你用20px作為根元素適配公司的寫法,你要怎麼改你的css呢?

解答:舉個例子,乙個寬為16px,在50px下的rem為16/50=0.32rem,在20px下則為16/20=0.8,這樣可得0.8/0.32=2.5,那麼你只要在原來的基礎上將你寫的所有的remx2.5即可

px與rem關係及轉換

px特點 1.ie無法調整那些使用px作為單位的字型大小 2.國外的大部分 能夠調整的原因在於其使用了em或rem作為字型單位 3.firefox能夠調整px和em,rem,但是96 以上的中國網民使用ie瀏覽器 或核心 px畫素 pixel 相對長度單位。畫素px是相對於顯示器螢幕解析度而言的。引...

rem與px的關係

rem是相對於根元素 html 的,我們只需要在根元素上設定乙個參考的值,這個參考值根據自己的需求來定。如 瀏覽器的預設的font size 16px 它的px和rem之間的轉換如下表所示 pxrem 12px 12 16 0.75 rem 14px 14 16 0.875 rem 16px 16 ...

rem與px的轉換

2019獨角獸企業重金招聘python工程師標準 rem是相對於根元素,這樣就意味著,我們只需要在根元素確定乙個參考值,這個參考值設定為多少,完全可以根據您自己的需求來定。我們知道,瀏覽器預設的字型大小16px,來看一些px單位與rem之間的轉換關係 px rem 12 12 16 75 14 14...