如何實現px和rem完美轉換
在做移動端前端開發的時候，常常遇到這樣的問題，需要用rem來實現裝置的自適應。但苦於rem和px的轉換卻又忘而卻步。
1。首先要確認UI的設計稿的基準是按照哪種裝置寬度的機型設計的，通常的設計稿是按照iphone6 plus也就是寬度750px來設計的。這樣我們拿到手之後就要把如下的responsive。css中的 @media screen and （min-width： 320px） 設定成為font-size： 100px；
2。引入responsive。css成功後，之後在寫頁面樣式的時候就可以按照 設計稿上顯示寬度 除以 2 除以 100 得到。例如：100px/2/100 = 0。5rem；
/*****
responsive font
lastmodify zhancheng
由於UE目前都按375為1：2比例計算，所以預設370px為font-size：100px！important；
註釋掉的地方是官方responsive預設以iphone4、5的標準為基準定義的
*****/
@
media
screen
and
（
min-width
：
320px
）
{
html
{
/*font-size： 100px！important；*/
font-size
：
84。375
px
！important
；
}
}
@
media
screen
and
（
min-width
：
330px
）
{
html
{
/*font-size： 103。125px！important；*/
font-size
：
87。5
px
！important
；
}
}
@
media
screen
and
（
min-width
：
340px
）
{
html
{
/*font-size： 106。25px！important；*/
font-size
：
90。625
px
！important
；
}
}
@
media
screen
and
（
min-width
：
350px
）
{
html
{
/*font-size： 109。375px！important；*/
font-size
：
93。75
px
！important
；
}
}
@
media
screen
and
（
min-width
：
360px
）
{
html
{
font-size
：
96。875
px
！important
；
/*font-size： 112。5px！important；*/
}
}
@
media
screen
and
（
min-width
：
370px
）
{
html
{
/*font-size： 115。625px！important；*/
font-size
：
100
px
！important
；
}
}
@
media
screen
and
（
min-width
：
380px
）
{
html
{
/*font-size： 118。75px！important；*/
font-size
：
103。125
px
！important
；
}
}
@
media
screen
and
（
min-width
：
390px
）
{
html
{
/*font-size： 121。875px！important；*/
font-size
：
106。25
px
！important
；
}
}
@
media
screen
and
（
min-width
：
400px
）
{
html
{
/*font-size： 125px！important；*/
font-size
：
109。375
px
！important
；
}
}
@
media
screen
and
（
min-width
：
410px
）
{
html
{
/*font-size： 128。125px！important；*/
font-size
：
112。5
px
！important
；
}
}
@
media
screen
and
（
min-width
：
420px
）
{
html
{
/*font-size： 131。25px！important；*/
font-size
：
115。625
px
！important
；
}
}
@
media
screen
and
（
min-width
：
430px
）
{
html
{
/*font-size： 134。375px！important；*/
font-size
：
117。75
px
！important
；
}
}
@
media
screen
and
（
min-width
：
440px
）
{
html
{
/*font-size： 137。5px！important；*/
font-size
：
120。875
px
！important
；
}
}
@
media
screen
and
（
min-width
：
450px
）
{
html
{
/*font-size： 140。625px！important；*/
font-size
：
124
px
！important
；
}
}
@
media
screen
and
（
min-width
：
460px
）
{
html
{
/*font-size： 143。75px！important；*/
font-size
：
127。125
px
！important
；
}
}
@
media
screen
and
（
min-width
：
470px
）
{
html
{
/*font-size： 146。875px！important；*/
font-size
：
130。25
px
！important
；
}
}
@
media
screen
and
（
min-width
：
480px
）
{
html
{
/*font-size： 150px！important；*/
font-size
：
133。375
px
！important
；
}
}
@
media
screen
and
（
min-width
：
490px
）
{
html
{
/*font-size： 153。125px！important；*/
font-size
：
136。5
px
！important
；
}
}
@
media
screen
and
（
min-width
：
500px
）
{
html
{
/*font-size： 156。25px！important；*/
font-size
：
139。625
px
！important
；
}
}
@
media
screen
and
（
min-width
：
639px
）
{
html
{
/*font-size： 200px！important；*/
font-size
：
142。75
px
！important
；
}
}
@
media
screen
and
（
min-width
：
719px
）
{
html
{
/*font-size： 225px！important；*/
font-size
：
135。875
px
！important
；
}
}
@
media
screen
and
（
max-width
：
319px
）
{
html
{
font-size
：
84。375
px
！important
；
}
}