摘要：因?yàn)橹挥杏玫轿粓D的地方才會(huì)出現(xiàn)像素缺失和像素丟失的狀況其他的元素都是系統(tǒng)繪制的矢量圖形不受是否是高清屏幕的影響。解決方案圖標(biāo)準(zhǔn)還是按照上方的標(biāo)準(zhǔn)。比如大小為的按鈕按上面標(biāo)準(zhǔn)換算成為這就蛋疼了，你無(wú)法直觀看出這個(gè)按鈕多大修改起來(lái)更是蛋疼。

1.明確統(tǒng)一@x圖的標(biāo)準(zhǔn)，以750x1334切下來(lái)的圖 為@2x的標(biāo)準(zhǔn)
2.使用以屏幕寬度為基準(zhǔn)的相對(duì)單位,為了適配,從設(shè)計(jì)稿到成品肯定存在換算過(guò)程
3.為位圖的容器設(shè)置寬高
適配后效果圖:基本不會(huì)出現(xiàn)很不理想的狀況

其實(shí)已750x1334設(shè)計(jì)出來(lái)的圖，切下來(lái)，剛剛好就是2x圖，縮小1倍就是1x，乘以1.5就是3x圖

不是的 ！！比如750px的iphone6 量出75px的物體，在375px的手機(jī)里肯定只有35px。所以為了適配你必需轉(zhuǎn)換成以屏幕寬度為標(biāo)準(zhǔn)的相對(duì)單位,所以換算過(guò)程肯定是存在的,因?yàn)樵O(shè)計(jì)稿只是一個(gè)750的基準(zhǔn)。
@x圖只針對(duì)于圖片和圖標(biāo),這種需要用到位圖的地方詳細(xì)原理請(qǐng)點(diǎn)擊查看.
其目標(biāo)既是在等大的容器內(nèi)裝入像素更大的位圖,從而補(bǔ)足像素點(diǎn)的缺失。
因?yàn)橹挥杏玫轿粓D的地方才會(huì)出現(xiàn)像素缺失和像素丟失的狀況,其他的元素都是系統(tǒng)繪制的矢量圖形不受是否是高清屏幕的影響。

如果@x圖比實(shí)際需要小，那么圖像就會(huì)模糊。

如果@x圖比實(shí)際需要大時(shí)會(huì)出現(xiàn)什么問(wèn)題，其實(shí)這種情況也會(huì)出現(xiàn)問(wèn)題只是問(wèn)題不明顯，會(huì)出現(xiàn)的問(wèn)題就是圖像失真，因?yàn)樵O(shè)備實(shí)際上沒(méi)那么多像素點(diǎn)顯示，就是丟失一些像素點(diǎn)。這種情況一般不易察覺(jué),但是問(wèn)題肯定是存在的。這就是為什么有些同志拿到大圖了，卻覺(jué)得可以的原因，因?yàn)橹灰拗屏藞D片的大小，他自己也看不出問(wèn)題。
另外還有一點(diǎn)，就是web前端同志拿到的圖片會(huì)過(guò)大,這個(gè)影響就比較大了。
所以不是用越大的圖就越好。

@x圖標(biāo)準(zhǔn)還是按照上方的標(biāo)準(zhǔn)。如果發(fā)現(xiàn)ps切下來(lái)的@2x比設(shè)計(jì)稿里的大了，既是出現(xiàn)錯(cuò)誤。
另外程序端還是建議按設(shè)計(jì)稿給用到圖片的地方設(shè)置寬高,這樣防止換了大圖后圖片撐開(kāi)的問(wèn)題。

rem是指相對(duì)于根元素的字體大小的單位。
那么根據(jù)該原理：我們只需能動(dòng)態(tài)獲取屏幕的dpr及寬度信息，并改變根元素的font-size，其余的所有頁(yè)面元素也將會(huì)進(jìn)行改變。

詳細(xì)原理請(qǐng)點(diǎn)擊查看

但是該方案有個(gè)問(wèn)題，rem單位很不直觀。比如大小為80px的按鈕, 按上面標(biāo)準(zhǔn)換算成rem為1.946rem[這就蛋疼了，你無(wú)法直觀看出這個(gè)按鈕多大,修改起來(lái)更是蛋疼。如果沒(méi)有一套優(yōu)雅的管理方案，后期修改基本靠感覺(jué)或者畫(huà)點(diǎn)時(shí)間計(jì)算下==]，接下來(lái)和大家聊聊如何優(yōu)雅的使用rem單位。

使用sass函數(shù)來(lái)輔助解決

假設(shè)對(duì)于一個(gè)iphone6的視覺(jué)稿，我們定義它的基準(zhǔn)值就是75 該基準(zhǔn)值是根據(jù)你的定義變的關(guān)于基準(zhǔn)值有問(wèn)題可見(jiàn)
這樣我們就可以按照設(shè)計(jì)稿的大小寫(xiě)進(jìn)程序,從而便于維護(hù)和識(shí)別

//輔助函數(shù)
// 例如: .px2rem(height, 80);
@mixin px2rem(@name, @px){
    @{name}: @px / 75 * 1rem;
}

原理與上面的rem相同,也來(lái)得更簡(jiǎn)單。因?yàn)関w本來(lái)就相對(duì)可視窗口寬度的百分比不受顯示器分辨率的影響。

需要注意有版本要求：android4.4以上版本；ios8以上版本 最新兼容性查看
另外也存在百分比在設(shè)計(jì)稿中轉(zhuǎn)換到程序上的不直接問(wèn)題

使用sass函數(shù)來(lái)輔助編程

同樣在定好設(shè)計(jì)稿后，可以書(shū)寫(xiě)sass函數(shù)來(lái)輔助編程
假設(shè)設(shè)計(jì)稿為750*1330 上的按鈕大小為120px,那么可以這么書(shū)寫(xiě)

//.px2rem(width, 120);
@mixin px2vw(@name, @px){
    @{name}: @px / 750 * 1vw;
}

圖片這里因?yàn)閔5端特殊,既要考慮流量,又要考慮清晰度,這里推薦還是直接使用@2x圖吧!別折騰了！

rpx為小程序自己的單位,會(huì)對(duì)設(shè)備進(jìn)行適配
rpx與[750*1330]設(shè)計(jì)稿px的關(guān)系1px==1rpx,但是在iphone6上0.5px==1rpx 詳見(jiàn)

Taro 方案的初心就是為了打造一個(gè)多端開(kāi)發(fā)的解決方案。目前 Taro 代碼可以支持轉(zhuǎn)換到 微信/百度/支付寶/字節(jié)跳動(dòng)小程序 、 H5 端 以及 移動(dòng)端（React-Native）。
Taro.js是京東出品的小程序框架,經(jīng)使用除了不支持一些react語(yǔ)法外，基本無(wú)大槽點(diǎn)[這里不經(jīng)要吐槽下騰訊官方的wepy，真是坑死人不償命!請(qǐng)慎用慎用!]
該框架直接服務(wù)到位,代碼直接書(shū)寫(xiě)px單位[又不用記多一個(gè)rpx單位了