微信小程序中单位rpx和rem的使用

微信小程序中单位rpx和rem的使用

前言

微信小程序最近火了,大家开发微信小程序有没有注意微信小程序对手机屏幕的要求或者影响呢,面对不同的手机屏幕,微信

这篇文章主要给大家讲解了rpx和rem应用于微信小程序,如果你还没有入门,建议先从下面看起

rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应,

    
微信小程序官方文档

微信小程序尺寸单位rpx以及样式

     >web app变革之rem

rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应。

    
>rpx单位官方文档

规定屏幕宽为750rpx。如在 iPhone6
上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px =
750物理像素,1rpx = 0.

    
>rpx单位基础介绍

rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。

如果看完上面几篇文章,我们开始进入正题吧~~

如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px =
750物理像素,1rpx = 0。

一、rem的使用

rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在
iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px =
750物理像素,1rpx = 0.5px = 1物理像素。

1) js中导入下面这段代码

 设备 rpx换算px (屏幕宽度/750) px换算rpx (750/屏幕宽度)

(function (doc, win) {
 var docEl = doc.documentElement,
 resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
 recalc = function () {
 var clientWidth = docEl.clientWidth;
 if (!clientWidth) return;
 docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
 };

 if (!doc.addEventListener) return;
 win.addEventListener(resizeEvt, recalc, false);
 doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

iPhone5 1rpx = 0.42px 1px = 2.34px
iPhone6 1rpx = 0.5px 1px = 2rpx
iPhone6s 1rpx = 0.552px 1px = 1.81rpx

2) 根据设计稿宽度算出rem和px直接的转换公式

微信小程序也支持rem尺寸单位,rem和rpx的换算关系:rem:
规定屏幕宽度为20rem;1rem = (750/20)rpx

例如:

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

640px的设计稿,转换公式就是按照上面js中这句而来【docEl.style.fontSize =
20 * (clientWidth / 320) + ‘px’】,最终 1rem = 20 x 640/320 + ‘px’ =
40px;

感谢大家阅读,希望能帮助到大家,谢谢大家对本站的支持!

3)根据设计稿按照1rem = 40px 对着各个元素进行单位转换

您可能感兴趣的文章:

例如:

我们测量一个元素宽度是400px,那么最终css中这样写 width:400/40 = 10rem

图片 1
正常情况下rem的使用

admin

网站地图xml地图