除了干货，其它什么也没有 | ||||
职场 | 数据 | 新媒体 | 设计 | 极客 |
企业级新媒体托管服务：021 37218818
或添加微信 Zhuoya_Work
对于真正高阶的品牌级新媒体运营，正确认知 px/em/rem 的意义至关重要。尤其是当我们开发 H5、交互图文时，它将直接关乎不同机型的自适应结果。所以今天，JZ 来具体为各位运营人讲解当我们在书写前端代码时，这三者的意义、应用场景。
px 像素
px（Pixel）对显示器而言是一个相对长度单位，对于设计师而言则是一个绝对长度单位。其原因在于像素本质上是由显示器分辨率决定的。而当下，在我们适配不同的手机型号，往往发现各色品牌的手机分辨率千奇百怪，因此 px 的设计虽然方便，但是在实际适配时往往洋相百出。
当然，它仍是最容易被普通人和新媒体小白理解的长度单位，因而如微信公众平台的图文编辑器，也依然采用的是 px 的字号制度。对于任何浏览器，包括微信的内置 TBS 浏览器，16px 都是一个默认标准长度单位。
可是现在运营人们慢慢发现，当排版过程中各类块级元素彼此交错时，基于 px 的尺寸调整在各手机终端表现各不一致。当然从适配原则看，通常我们要优先保障以下适配顺序：
iPhoneX
iPhone7/8
iPhone7/8 Plus
iPhone6s
华为旗舰类
安卓其他
尽管在手机圈，用户往往会因为各家品牌争锋相对。不过对于企业广告投放而言，残酷的现实依然是品牌主默认 iPhone 和华为旗舰机用户的消费能力最强。对于个别调性高的公司，安卓适配甚至完全忽略。
当然，开发者也要注意客户的特殊性。比如近期我们交付华为的交互式图文《端午｜华为x粽子玩跨界？》，在整个开发过程中，完全是以华为旗舰机和平民机的表现为优先适配的。
至于 iPhone 全系列的适配尺寸标准、位图素材、建模等，你可以点击下方小程序获取▼
em 单位
em 好比数学当中，一个无单位的 1 的存在。在浏览器默认情况下，16 px 为 em。尤其当页面内位图素材、矢量模块纵横交织的情况下，em 的表现就比 px 好多了。em 因而不是一个固定数值，可以根据对父元素的声明而发生变化，这显然使得排版更为自由。
很多时候，我们无法避免位图素材的 px 对排版和布局的影响。如果以往你通过 px 对位图素材进行定位，现在可以尝试用 em 进行，以浏览器单位长度为概念，很多时候可以确保多机型的布局效果接近。
rem 单位
rem 是 CSS3 的一个新增单位，相比 em 最大的优势在于不以“父元素”为基准，这样可以限制多个嵌套“父元素”产生的尺寸连锁反应问题，只以 HTML 根元素为参照。于是，rem 可以说兼容了相对尺寸和绝对尺寸的共同优势，在布局时就更方便。
上周，我们在《杜蕾斯花式动画排版是如何实现的？》中，就重点“表扬”了动画排版中的 rem 应用。
而这类应用其实在交互式图文开发中是相对普遍的。上周一位 JZ 知识星球的学习者就向计老师提出了一个相关问题▼
也欢迎你加入整个知识星球高处不胜寒的新媒体运营社群，日常社群活动包括：1.每周一节视频课 2.每日接收行业早报 3.任意向社内大神提问 4.高频共享代码包 5.高频共享设计素材 6.高频共享图文教程 7.社员互评互助 8.不定期任务挑战 ……开放年费制度（￥365）
其他你会感兴趣的内容
回复 抖音了解更多抖音媒体运营干货
回复 大 V阅读圈内大号背后隐秘故事
回复 排版获取更多专业图文排版教程
回复 代码学习其他高阶代码创业设计
回复 H 5开启移动营销的技术进阶路
H5、平面、视频等数字营销服务请致电
TEL：（021）3721 8818
客户案例：APEC 峰会 | 中国航天科技集团 | 香奈儿 | 肯德基（湖南） | 中国国际航空 | 湖北省电视台 | 河南卫视 | 浙江省人民广播电台 | 三生制药 | 交通银行 | 建设银行 | 真格基金 | 南方周末 | 上海闵行教育学院 | 牛津大学出版社 | 新东方集团 | 伟巴斯特 | 雪佛兰汽车 | 观致汽车 | 雷诺汽车 | TNS 新华信 | 高力国际｜第一太平戴维斯｜德国莱茵｜盖茨基金会｜追星集团
抱歉，除了干货，其他什么也没有。
