关键之 :px 像素 rpx 微信 rem em 适配
开始写这文章,也是这两天遇到了个小问题,网上找了些答案,但解释不是很易懂,所以就有这篇文章.以下内容你将获得如下知识
什么是像素px, px ,ren ,em 以及在什么情况下使用,本文尽量减少专业术语,争取看完就记住.
PX:一般教程里会说像素和分辨率有关,你又要去理解分辨率,这里我带着不严谨的说法给你个通俗易懂的解释,现在电脑分辨率是在1920*1080,你就把他理解成长1920,宽1080,那1个像素大小,就是长1宽1,实际你要量1像素多大,那个尺子量你们家显示屏高度/1080就是1像素多少,如果是搞印刷的就要很关心1像素到底多大,有时弄巨型户外广告,PS里设置屏幕分辩率(网页72),就影响着1像素到底是20厘米还是2厘米.所以像素这东西并不是绝对多大,因为我们是在做网页所以不用去考虑其他的,就将像素定死,12像素就是word中小四的大小.
REM是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em
em(font size of the element)是指相对于父元素的字体大小的单位。它们之间其实很相似,只不过一个计算的规则是依赖根元素一个是依赖父元素计算。
REM 电脑端依据是根元素 HTML标签, 在HTML中设置文字大小,后面字体可以依他为依据设置倍数。
在实际开发中,更多的是直接使用像素来使用,之前我有做个一个统计,网页中使用字体大小的范围..如果是正文不问基本会用标准14像素,导航栏,会在12像素在14像素之间,12像素居多.大多数情况下,多会使用像素居多.好景不长,这几年间手机端的大量出现,移动浪潮发展的速度,超过电脑端的发展.网站要适应手机观看.原本布局很好的页面,到手机一转,布局结构乱了,字体大小完全两样了.(尤其是设置浮动元素)
iPhone6 的像素是在375*667,这个跟电脑比印象会是这样,但是实际手机屏幕会比较小,因为两个计算方式不一样.怎么不一样,天知道.不过可以告诉你怎么计算出写在手机里的字体大小,实际我们要跟像素结合在一起,在来复习一下,电脑端的1080怎么算长, 聪明的你顿悟了没,手机宽375像素,一行中能最多容下26个14像素的字体外化,如果做手机端页面建议还是以苹果5为基准320像素做(尤其是导航,适配较小的,等比例分配宽度,不容易发生溢出现象,这只是经验之谈).
那RPX 是什么鬼,在这世界上总有一群人想着改变生活,即使他们不是处女座.还是以苹果6为例,看苹果6在和其屏幕大小一致的前提下,你会觉得他看起来会比其他机器清晰度来的高.有时还会出现字体发虚现象,同等物理像素,利用简称高科技,将这个像素变为750*1334,这个单位就是rpx, 我讲的很不严谨,RPX 尽量少用,但是微信小程序里官方介绍使用,总之我是不会用它的,1rpx 在手机里有地方是不显示的.以下是微信文档换算单位
EM 如果是网站,那em是很好理解,只要定义了html 字体大小,就以他为基准,这样就很方便设置整体字体比例大小,不用每个地方都改,但是当他来到小程序时,EM的根在哪里,微信他爹定义好了,这点是今天坑发现,微信做法是将整个屏幕宽度进行等比划分成20等份(1等分=1rem),你要问我有多大,我真不知道,万一你拿的是IPad呢,注意哦,我这句开玩笑就是微信使用EM得杀手锏,适配手机各种尺寸,你大我大,你小我小,微信竞争对手是APP,APP很多程序用IPad 看效果是很差的,微信推出这个等比字体大小很好的做到这一点,(另外20个等比,这个怎么跟阿里的另一框架antdesgin一样,难道是同门师兄)如果你的客户用IPAD 少的话,就不用考虑.
总结应用场景:
px: 通杀, 但在中等设备(平板,iPad,表现就不是很好)
rpx :新技能,应用场景较少,主要小程序上的新鲜
em: 网页, 手机移动端内容中的层级嵌套,通过设置字体的比例设计层次
rem: 网页,手机移动端适配, 微信中主要适配IPAD