關(guān)于設(shè)計(jì)師出的不是小程序官方推薦的(750*1334)設(shè)計(jì)圖使用rpx問題
小程序自己的單位rpx，官方建議設(shè)計(jì)師可以用 iPhone6 作為視覺稿的標(biāo)準(zhǔn)(7501334),但是總有部分設(shè)計(jì)師(部分，希望不要被自己公司的設(shè)計(jì)師看到此文章，要不會(huì)不會(huì)死的很慘啊~~~)還按照iPhone5出圖(6401076)出圖，哎，該死的設(shè)計(jì)師還很懶，還忙，沒法啊，只有前端（渣渣王）自己解決了。
# 尺寸單位rpx
#### rpx（responsive pixel）: 可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。規(guī)定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個(gè)物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
建議： 開發(fā)微信小程序時(shí)設(shè)計(jì)師可以用 iPhone6 作為視覺稿的標(biāo)準(zhǔn)。
image.png
這是設(shè)計(jì)的圖，第三天的邊緣垂直方向到達(dá)云彩的那里
image.png
這個(gè)是直接用640設(shè)計(jì)稿下的圖片尺寸的第三天，直接感覺被壓榨了的感覺哈哈哈，這里的圖片尺寸為250*90，如果是正常的實(shí)際圖(750),直接圖片的css樣式為
img{
height:250rpx;
width:90rpx;
}
但是他不是正常的啊，拿640的舉例吧，因該是
img{
height:(750/640)*250rpx;
width:(750/640)*90rpx;
}
但是種寫法完全不被wxss，小程序語言讀取，所以我們用到了less，下面是準(zhǔn)備工作。
工具：vscode 下載地址
image.png
安裝插件Easy WXLESS安裝完，在當(dāng)前頁面下建立和你的.wxss文件名相同的.less文件，直接申明變量，@daywede: 1.17rpx; (750/640≈1.17)
在下面的樣式中，直接@daywede*你的設(shè)計(jì)稿尺寸就可以了，vscode會(huì)自動(dòng)宰你保存的時(shí)候編譯成小成語識(shí)別的wxss文件。
image.png
image.png
好了大功告成，只需要申明個(gè)變量，下面的樣式乘以就大功告成，避免自己用計(jì)算器一個(gè)個(gè)算(傻白甜的做法)，又避免小程序wxss文件不識(shí)別運(yùn)算方法。
