<table><tbody>
除了乾貨，其它什麼也沒有
職場
數據
新媒體
設計
極客
企業級新媒體託管服務：021 37218818
對於真正高階的品牌級新媒體運營，正確認知 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 新華信 | 高力國際｜第一太平戴維斯｜德國萊茵｜蓋茨基金會｜追星集團
抱歉，除了乾貨，其他什麼也沒有。
閱讀更多 JZ多媒體解決方案 的文章
