@media媒体查询 移动端 px 转换 rem

@media媒体查询，定义根元素html的font-size，实现移动端 px 转换 rem

• 致谢原链接 https://www.cnblogs.com/hjptopshow/p/9382448.html ，不过个人直接使用时scss 报错，记录下修后写法。

html {

 @media only screen and (min-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2) {

   /* 针对iPhone 4, 5c,5s, 所有iPhone6的放大模式，个别iPhone6的标准模式　 */

  font-size:10px;

  }

  @media only screen and (min-device-width: 375px)and (-webkit-min-device-pixel-ratio: 2) {

  /* 针对大多数iPhone6的标准模式 */

   font-size:12px;

  }

  @media only screen and (min-device-width: 375px)and (-webkit-min-device-pixel-ratio: 3) { 

  /* 针对所有iPhone6+的放大模式　　 */

  font-size:16px;

  }

  @media only screen and (min-device-width:412px) and (-webkit-min-device-pixel-ratio: 3) {

  /* 针对所有iPhone6+的标准模式,414px写为412px是由于三星Nexus 6为412px，可一并处理　　 */

  font-size:20px;

  }
}

但个人常用的自适应单位还是rpx，转化公式为：

官网:

开发者可以通过设计稿基准宽度计算页面元素 rpx 值，设计稿 1px 与框架样式 1rpx 转换公式如下：

设计稿 1px / 设计稿基准宽度 = 框架样式 1rpx / 750rpx

换言之，页面元素宽度在 uni-app 中的宽度计算公式：

750 * 元素在设计稿中的宽度 / 设计稿基准宽度

个人：

let rate = uni.getSystemInfoSync().windowWidth / 750;
elrpx = elpx / rate;

tip:
a / (b / c) = a * c / b