一分钟告诉你rpx rem 与微信关系

关键之 :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中设置文字大小,后面字体可以依他为依据设置倍数。

REM  用法

在实际开发中,更多的是直接使用像素来使用,之前我有做个一个统计,网页中使用字体大小的范围..如果是正文不问基本会用标准14像素,导航栏,会在12像素在14像素之间,12像素居多.大多数情况下,多会使用像素居多.好景不长,这几年间手机端的大量出现,移动浪潮发展的速度,超过电脑端的发展.网站要适应手机观看.原本布局很好的页面,到手机一转,布局结构乱了,字体大小完全两样了.(尤其是设置浮动元素)

理想中 手机像素和电脑像素

iPhone6 的像素是在375*667,这个跟电脑比印象会是这样,但是实际手机屏幕会比较小,因为两个计算方式不一样.怎么不一样,天知道.不过可以告诉你怎么计算出写在手机里的字体大小,实际我们要跟像素结合在一起,在来复习一下,电脑端的1080怎么算长, 聪明的你顿悟了没,手机宽375像素,一行中能最多容下26个14像素的字体外化,如果做手机端页面建议还是以苹果5为基准320像素做(尤其是导航,适配较小的,等比例分配宽度,不容易发生溢出现象,这只是经验之谈).

那RPX 是什么鬼,在这世界上总有一群人想着改变生活,即使他们不是处女座.还是以苹果6为例,看苹果6在和其屏幕大小一致的前提下,你会觉得他看起来会比其他机器清晰度来的高.有时还会出现字体发虚现象,同等物理像素,利用简称高科技,将这个像素变为750*1334,这个单位就是rpx, 我讲的很不严谨,RPX 尽量少用,但是微信小程序里官方介绍使用,总之我是不会用它的,1rpx 在手机里有地方是不显示的.以下是微信文档换算单位

腾讯 rpx 

EM  如果是网站,那em是很好理解,只要定义了html 字体大小,就以他为基准,这样就很方便设置整体字体比例大小,不用每个地方都改,但是当他来到小程序时,EM的根在哪里,微信他爹定义好了,这点是今天坑发现,微信做法是将整个屏幕宽度进行等比划分成20等份(1等分=1rem),你要问我有多大,我真不知道,万一你拿的是IPad呢,注意哦,我这句开玩笑就是微信使用EM得杀手锏,适配手机各种尺寸,你大我大,你小我小,微信竞争对手是APP,APP很多程序用IPad 看效果是很差的,微信推出这个等比字体大小很好的做到这一点,(另外20个等比,这个怎么跟阿里的另一框架antdesgin一样,难道是同门师兄)如果你的客户用IPAD 少的话,就不用考虑.

总结应用场景:

px: 通杀, 但在中等设备(平板,iPad,表现就不是很好)

rpx :新技能,应用场景较少,主要小程序上的新鲜

em: 网页, 手机移动端内容中的层级嵌套,通过设置字体的比例设计层次

rem: 网页,手机移动端适配, 微信中主要适配IPAD



欢迎关注我开的最新公众号
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,033评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,725评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,473评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,846评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,848评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,691评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,053评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,700评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,856评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,676评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,787评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,430评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,034评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,990评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,218评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,174评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,526评论 2 343

推荐阅读更多精彩内容