在做移動(dòng)端前端開(kāi)發(fā)的時(shí)候豆茫，常常遇到這樣的問(wèn)題伸蚯，需要用rem來(lái)實(shí)現(xiàn)設(shè)備的自適應(yīng)撬码。但苦于rem和px的轉(zhuǎn)換卻又忘而卻步。
1.首先要確認(rèn)UI的設(shè)計(jì)稿的基準(zhǔn)是按照哪種設(shè)備寬度的機(jī)型設(shè)計(jì)的掰吕，通常的設(shè)計(jì)稿是按照iphone6 plus也就是寬度750px來(lái)設(shè)計(jì)的果覆。這樣我們拿到手之后就要把如下的responsive.css中的 @media screen and (min-width: 320px) 設(shè)置成為font-size: 100px;
2.引入responsive.css成功后，之后在寫(xiě)頁(yè)面樣式的時(shí)候就可以按照 設(shè)計(jì)稿上顯示寬度 除以 2 除以 100 得到殖熟。例如：100px/2/100 = 0.5rem;
/***** responsive font lastmodify zhancheng 由于UE目前都按375為1:2比例計(jì)算局待，所以默認(rèn)370px為font-size:100px!important; *****/ @media screen and (min-width: 320px) { html { /*font-size: 100px!important;*/ font-size: 84.375px!important; } } @media screen and (min-width: 330px) { html { /*font-size: 103.125px!important;*/ font-size: 87.5px!important; } } @media screen and (min-width: 340px) { html { /*font-size: 106.25px!important;*/ font-size: 90.625px!important; } } @media screen and (min-width: 350px) { html { /*font-size: 109.375px!important;*/ font-size: 93.75px!important; } } @media screen and (min-width: 360px) { html { font-size: 96.875px!important; /*font-size: 112.5px!important;*/ } } @media screen and (min-width: 370px) { html { /*font-size: 115.625px!important;*/ font-size: 100px!important; } } @media screen and (min-width: 380px) { html { /*font-size: 118.75px!important;*/ font-size: 103.125px!important; } } @media screen and (min-width: 390px) { html { /*font-size: 121.875px!important;*/ font-size: 106.25px!important; } } @media screen and (min-width: 400px) { html { /*font-size: 125px!important;*/ font-size: 109.375px!important; } } @media screen and (min-width: 410px) { html { /*font-size: 128.125px!important;*/ font-size: 112.5px!important; } } @media screen and (min-width: 420px) { html { /*font-size: 131.25px!important;*/ font-size: 115.625px!important; } } @media screen and (min-width: 430px) { html { /*font-size: 134.375px!important;*/ font-size: 117.75px!important; } } @media screen and (min-width: 440px) { html { /*font-size: 137.5px!important;*/ font-size: 120.875px!important; } } @media screen and (min-width: 450px) { html { /*font-size: 140.625px!important;*/ font-size: 124px!important; } } @media screen and (min-width: 460px) { html { /*font-size: 143.75px!important;*/ font-size: 127.125px!important; } } @media screen and (min-width: 470px) { html { /*font-size: 146.875px!important;*/ font-size: 130.25px!important; } } @media screen and (min-width: 480px) { html { /*font-size: 150px!important;*/ font-size: 133.375px!important; } } @media screen and (min-width: 490px) { html { /*font-size: 153.125px!important;*/ font-size: 136.5px!important; } } @media screen and (min-width: 500px) { html { /*font-size: 156.25px!important;*/ font-size: 139.625px!important; } } @media screen and (min-width: 639px) { html { /*font-size: 200px!important;*/ font-size: 142.75px!important; } } @media screen and (min-width: 719px) { html { /*font-size: 225px!important;*/ font-size: 135.875px!important; } } @media screen and (max-width: 319px) { html { font-size: 84.375px!important; } }
