关于设计图为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文件不识别运算方法。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 纯干货 UI上的精品文章,很有用,共享一下 iOS9使用的西文字体由Helvetica Neue变更为San Fr...
    UI_TING阅读 5,054评论 1 8
  • 下夜班,昨夜忙了一宿,入院六个生了四个剖了一个,这个数据不算惊人,没有很忙,但是也基本是停不下来的节奏。 可是早上...
    爱梨ALi阅读 975评论 0 0
  • 是人都会犯错,伟人犯过错、圣人也犯过错、我们普通人犯个错也是再正常不过了,我们每天都会在对错之间来回转换,有可能你...
    幕影心阅读 3,725评论 0 3
  • 浓雾不开 黑暗中的我们各自远行 伸出手想抓住逃脱的风景 挥一挥手 漫天的尘埃腾空而起 岸边熟悉的风景杳无踪影 转身...
    河丘阅读 1,157评论 0 0
  • 阅读时间:2015年12月3日 阅读笔记: 今天阅读了关于linux块设备驱动程序(block driver) l...
    文魁大脑马帅阅读 2,350评论 0 0