工具简介

• px转化为moblie的rem和小程序的rpx，程序员经常使用到这一块，开发过程中为了达到页面自适应的效果，将要进行相应的转换。
  

1. 各种pc端兼容使用单位：px+百分比（针对宽度）。各种移动端兼容使用：rem。pc+mobile使用：px+100%+media（或者框架）。小程序就单独的使用rpx。完美。

2. rpx单位是微信小程序专有。特点是自适应。因为rpx规定的是750个物理像素。所以设计图测量尺寸时先转化为iphone7的尺寸（宽375px也就是700物理像素）然后量出10px，就是20rpx。注意调试也要在iphone7下哦。

3. rem是根据根元素html的font-size的大小变化而变化，比如根元素为16px，那么转化为rem就是1/16rem。

4. 所以只要搭配media的使用就可控制rem为移动界的杠把子：自适应。这里对html进行了设置如下

   
   

        /*移动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

          }

        }