rem的作用与运用,小程序为什么用rpx为单位

html-css013

rem的作用与运用,小程序为什么用rpx为单位,第1张

开发过小程序的人都知道,小程序的单位是rpx,这是为什么?有什么作用呢,其实它源于rem布局,先来了解下rem的优势与工作原理。

rem布局在没正式使用到项目中,只知道他是根据html根元素的font-size来变化的

若:html{ font-size:20px}

则1rem = 20px

然后呢,有什么作用,定完html的font-size后,元素使用rem和使用px有什么区别,不都一样么?

其实rem他的主要运用场所在移动端,移动端的设计稿一般都是iphone6为基础设计的,设计稿的宽为750px;

手机的物理尺寸是375px;所以在用css的时候,设计尺寸需要除以2;

要用rem完成移动端的适配,需要固定浏览器的显示宽度不变。

也就是说,我在设计稿上量到宽367px的大小,那么css里可以直接写width:3.67rem。

此时,(以375px宽手机为例)第二步js设置的html字体大小为:375px除以7.5得50px;

7.5rem乘以50px得到的是375px刚好是屏幕的满宽。

也就是说,不论手机屏幕宽度多少,7.5rem永远能占屏幕的满宽。这样,在宽屏手机里,元素能够等比例放大一些,实现各类机型的适配,也方便了前端编码。

而做过小程序的人都知道,小程序不论任何机型,屏幕满宽都是750rpx,其实也就是从7.5rem延伸而来,至于根目录字体大小的配置,微信开发者工具已经将这些都配置好了,你尽情用就可以了。

如果有帮助,请点赞支持哦。

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

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

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

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

规定屏幕宽为750rpx。如在

iPhone6

上,屏幕宽度为375px,共有750个物理像素,则750rpx

=

375px

=

750物理像素,1rpx

=

0.

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

如在

iPhone6

上,屏幕宽度为375px,共有750个物理像素,则750rpx

=

375px

=

750物理像素,1rpx

=

0。

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

iPhone6

上,屏幕宽度为375px,共有750个物理像素,则750rpx

=

375px

=

750物理像素,1rpx

=

0.5px

=

1物理像素。

设备 rpx换算px

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

(750/屏幕宽度)

iPhone5 1rpx

=

0.42px 1px

=

2.34px

iPhone6 1rpx

=

0.5px 1px

=

2rpx

iPhone6s 1rpx

=

0.552px 1px

=

1.81rpx

微信小程序也支持rem尺寸单位,rem和rpx的换算关系:rem:

规定屏幕宽度为20rem;1rem

=

(750/20)rpx

注:开发微信小程序时设计师可以用

iPhone6

作为视觉稿的标准。

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