1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > CSS---px rpx pt em rem四种单位总结

CSS---px rpx pt em rem四种单位总结

时间:2019-04-06 16:32:49

相关推荐

CSS---px rpx pt em rem四种单位总结

1.px像素(Pixel)

相对长度单位。像素px是相对于显示器屏幕分辨率而言的

2.rpx

rpx :微信小程序开发中新出了尺寸单位rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。

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

设备 rpx换算px (屏幕宽度/750) ;px换算rpx (750/屏幕宽度) ;px属于逻辑像素。

3.pt

pt就是point,是印刷行业常用单位,等于1/72英寸。

4.em

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸,

由于浏览器的默认字体大小是 16px,所以未经调整默认字体大小的浏览器都符合: 1em = 16px。

em 会继承父级元素的字体大小。由此,只需要改变父元素的字体大小,就可以同步放大或缩小子元素的字体。

EM特点

1. em的值并不是固定的;

2. em会继承父级元素的字体大小。

5.rem

rem(root em): 仍然是相对大小,但相对的只是HTML元素。

rem单位是相对单位,是相对于HTML标签的字号计算结果

1rem = 1HTML字号大小

例如在HTML字号大小为20px时,box盒子的宽度为5*20=100px,高度为3*20=60px

/* 1rem = 1html标签字号大小 */html {font-size: 20px;}.box {width: 5rem;height: 3rem;background-color: pink;}

小程序中规定屏幕宽度为20rem;1rem = (750/20)rpx 。

移动端rem计算公式:

function getRem(pwidth,prem){var html = document.getElementsByTagName("html")[0];var oWidth = document.body.clientWidth || document.documentElement.clientWidth;html.style.fontSize = oWidth/pwidth*prem + "px";}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。