E企盈营销工具技术服务商 热线:4006-838-530

小程序常用单位解释大全

E企盈直播平台营销卖货系统

小程序现在应用到的单位越来越多,我们经常会搞不清楚他们的含义。所以我就参考网上众多博主的文章,整理了一个文档专门对各个单位进行解释。1 pt单位名称为点(Point),绝对长度单位。1pt=1/72英寸,常用于印刷当中,在AI、PS等设计软件当中字体大小所用的单位就是pt,它在广告印刷业当中十分受欢迎,也非常的好用。但现在在网页当中,pt几乎不出现了。使用pt定义文字,当用户设置超过96DPI(转化公式:px = pt * DPI / 72)的值,数值越大,字体就越大。2 px单位名称为像素,相对长度单位,像素px是相对于显示器屏幕分辨率而言的。像素的使用性特别广。使用px定义文字,无论用户怎么设置,都不会改变大小。3  em单位名称为相对长度单位。它没有一个固定数值,支持小数点后三位数,相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。需要注意的是:若父级单位用了em,且设置了文本大小,这父级大小会随文本大小而改变,会继承父级元素的字体大小。4 rem是CSS3新增的一个相对单位(root em,根em),是相对HTML根元素。通过它既可以做到只修改根元素就可以成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。 目前,除了IE8及更早版本外,所有浏览器均已支持rem。5  视口单位vw:1vw = 视口宽度的1%vh:1vh = 视口高度的1%vmax:vmax选取vw和vh中最大的那个.vmin:vmin选取vw和vh中最小的那个.6  rpxrpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。微信小程序也支持rem尺寸单位,rem和rpx的换算关系:rem: 规定屏幕宽度为20rem;1rem = (750/20)rpx注:开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。设备宽度750px比较容易计算750px的话1rpx=1px,这样的话,设计图上量出来的尺寸是多少px就是多少rpx,至于在不同的设备上实际上要换算成多少个rem就交给小程序自己换算。7 ch这个ch 单位是由CSS3规范引入的一个新单位,表示“0”字形的宽度。它应该是最不为人知的一个新单位,因为在绝大多数场景下,我们并不关心0 这个字符显示出来到底有多宽。但对等宽字体来说,这是个例外。在等宽字体中,“0”字形的宽度和其他所有字形的宽度是一样的。8 exex单位被定义为”当前字体的x-height或者一个em的一半”。给定的字体的x-height是指那个字体的小写x的高度。通常,这是这个字体的中间的标志。x-height:小写字母x的高度(阅读更多关于The Anatomy of Web Typography)ex单位在css1中已经存在,但是你不会找到对ch单位有像这样坚实的支持。具体支持,在Eric Meyer’s 的博客中查看CSS单位和值。9  pc绝对长度单位。派卡(Pica)。相当于我国新四号铅字的尺寸。in = 2.54cm = 25.4 mm = 72pt = 6pc10 in绝对长度单位。英寸(Inch)。1in = 2.54cm = 25.4 mm = 72pt = 6pc11  mm绝对长度单位。毫米(Millimeter)。1in = 2.54cm = 25.4 mm = 72pt = 6pc12 cm绝对长度单位。厘米(Centimeter)。1in = 2.54cm = 25.4 mm = 72pt = 6pc13 frcss fr 单位是一个自适应单位,fr单位被用于在一系列长度值中分配剩余空间,如果多个已指定了多个部分,则剩下的空间根据各自的数字按比例分配。  以上内容 参考链接:                     https://www.jianshu.com/p/f9b34885609d                                        https://www.cnblogs.com/913815ccmm/p/4858638.html                                         http://caibaojian.com/fr.html

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 小程序常用单位解释大全
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏