px转化为rpx (注:本转化率只针对类iphone7等宽度为375的屏幕)
px转化为rem(注:本转化率只针对类iphone7等宽度为375的屏幕)
rem转化为rpx (注:本转化率只针对类iphone7等宽度为375的屏幕)
工具使用温馨提示:
0. 各种pc端兼容使用单位:px+百分比(针对宽度)。各种移动端兼容使用:rem。pc+mobile使用:px+100%+media(或者框架)。小程序就单独的使用rpx。完美。
1. rpx单位是微信小程序专有。特点是自适应。因为rpx规定的是750个物理像素。所以设计图测量尺寸时先转化为iphone7的尺寸(宽375px也就是700物理像素)然后量出10px,就是20rpx。注意调试也要在iphone7下哦。
2. rem是根据根元素html的font-size的大小变化而变化,比如根元素为16px,那么转化为rem就是1/16rem。所以只要搭配media的使用就可控制rem为移动界的杠把子:自适应。这里我已经设置好了如下
demo链接下载(喜欢就送颗真心撒):
rem自适应移动端通用样式下载/*移动px换算rem*/ @media screen and (min-width:320px) { html { font-size:42.67px } } @media screen and (min-width:360px) { html { font-size:48px } } @media screen and (min-width:375px) { html { font-size:50px } } @media screen and (min-width:414px) { html { font-size:55.2px } } @media screen and (min-width:480px) { html { font-size:64px } } @media screen and (min-width:640px) { html { font-size:85.33px } } @media screen and (min-width:750px) { html { font-size:100px } }