?一拷橘、? rpx：全稱“response pixel”睦番，即響應(yīng)式的px，rpx單位是微信小程序中css的尺寸單位母市，它可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)矾兜。如在iphone6上，屏幕寬度375px患久，共有750個物理像素椅寺，則750rpx = 375px = 750物理像素，即1rpx = 0.5px = 1物理像素蒋失。
? ? ? ? 設(shè)備? ? ? ? ? ? ? ? ? ? ? ? ? ? rpx換算px(屏幕寬度/750)? ? ? ? ? ? ? ? ? ? px換算rpx(750/屏幕寬度)
? ? ? ? iphone5? ? ? ? ? ? ? ? ? ? ? ? 1rpx = 0.42rpx? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 1px = 2.34rpx
? ? ? ? iphone6? ? ? ? ? ? ? ? ? ? ? ? 1rpx = 0.5px? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 1px = 2rpx
? ? ? ? iphone6s? ? ? ? ? ? ? ? ? ? ? 1rpx = 0.552px? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?1px = 1.81rpx
開發(fā)微信小程序時(shí)返帕，設(shè)計(jì)師一般用iphone6作為視覺稿的標(biāo)準(zhǔn)。我們設(shè)計(jì)稿使用設(shè)備寬度為750px篙挽，等比例換算成rpx荆萤，這樣的話，設(shè)計(jì)圖量出來的尺寸是多少px就是多少rpx铣卡，至于在不同的設(shè)備上實(shí)際上要換算成多少個rpx就交給小程序自己換算链韭。
?二、? ?rem：是相對于根元素的字體大小的單位煮落，常用于做移動端自適應(yīng)布局敞峭。
一般瀏覽器不設(shè)字體大小的情況下默認(rèn)為16px，通常認(rèn)為1rem = 16px蝉仇，可以根據(jù)屏幕寬度大小去設(shè)置字體大小旋讹，可寫js代碼如下：
????????????let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth
????????????let? htmlEle = document.getElementsByTagName('html')[0]
????????????htmlEle.style.fontSize? = htmlWidth / 10 + 'px';
或者使用多媒體查詢?nèi)ピO(shè)置html字體大小，如
? ??????????@media screen and (max-width:320px){html{font-size:20px;}}
????????????@media screen and (min-width:321px) and (max-width:480px){html{font-size:24px;}}
? ? ? ? ? ? ......
我們在開發(fā)過程中可以借助于scss轿衔，自定義轉(zhuǎn)換函數(shù)沉迹，在.scss文件中寫轉(zhuǎn)換函數(shù)，如：
? ? ? ? ? ? ?@function px2rem($px){
? ? ? ? ? ? ? ? ? ? ? ? $rem: 37.5px? ? ? ? ? ? ? ? ? ? ? ? // 基準(zhǔn)值 （屏幕寬度/ 10 或者 屏幕寬度/20 ...）
? ? ? ? ? ? ? ? ? ? ? ? @return ($px / $rem) + rem
? ? ? ? ? ? ?}
? ? ? ? ? ? .header {
? ? ? ? ? ? ? ? ? ? height: px2rem(800px)
? ? ? ? ? ? }
? ??????????
? ??????
? ??????
