关于设计图为640，使用小程序的rpx问题

关于设计师出的不是小程序官方推荐的(750*1334)设计图使用rpx问题

小程序自己的单位rpx，官方建议设计师可以用 iPhone6 作为视觉稿的标准(7501334),但是总有部分设计师(部分，希望不要被自己公司的设计师看到此文章，要不会不会死的很惨啊~~~)还按照iPhone5出图(6401076)出图，哎，该死的设计师还很懒，还忙，没法啊，只有前端（渣渣王）自己解决了。

# 尺寸单位rpx

#### rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
![image.png](https://upload-images.jianshu.io/upload_images/8690722-6e6b74be77278c87.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

image.png

这是设计的图，第三天的边缘垂直方向到达云彩的那里

image.png

这个是直接用640设计稿下的图片尺寸的第三天，直接感觉被压榨了的感觉哈哈哈，这里的图片尺寸为250*90，如果是正常的实际图(750),直接图片的css样式为

img{
    height:250rpx;
    width:90rpx;
}

但是他不是正常的啊，拿640的举例吧，因该是

img{
    height:(750/640)*250rpx;
    width:(750/640)*90rpx;
}

但是种写法完全不被wxss，小程序语言读取，所以我们用到了less，下面是准备工作。
工具：vscode 下载地址

image.png

安装插件Easy WXLESS安装完，在当前页面下建立和你的.wxss文件名相同的.less文件，直接申明变量，@daywede: 1.17rpx; (750/640≈1.17)
在下面的样式中，直接@daywede*你的设计稿尺寸就可以了，vscode会自动宰你保存的时候编译成小成语识别的wxss文件。

image.png

image.png

好了大功告成，只需要申明个变量，下面的样式乘以就大功告成，避免自己用计算器一个个算(傻白甜的做法)，又避免小程序wxss文件不识别运算方法。