7月份在部門內給設計中心的同事們帶來《讓H5頁面適配移動設備全家 - 設計師篇 - PPT》的分享，在視覺和交互稿上提出頁面適配的建議及提升頁面體驗的好處，促進前端和設計雙方更好的合作，同時也提升頁面體驗，分享后跟設計師們溝通，反應情況良好，說明這套適配的方案是有一定價值的。在9月份很榮幸收到 ...

上一篇文章《為什么選擇iPhone5的分辨率作為H5視覺稿尺寸》最后留下了問題：是否需要視覺設計師設計多套的視覺稿供給前端工程師做頁面適配呢？按照自己以前的方法，通常會要求設計師設計2套的尺寸，一套是窄屏手機(如iPhone4)，另一套是寬屏手機(如iPhone5)，這樣的好處不僅減少重構頁面 ...

https://www.cnblogs.com/fang51/p/4286481.html 移動端尺寸繁多，包括IOS和安卓，尺寸多達十余種，所以移動頁面尺寸的適配一直是前端和設計的頭疼。今天來總結一下當前市場上的一些移動端尺寸，方便設計師和前端去考慮適配。但是最好還是針對自己的產品做調查 ...

前言：前端頁面的布局（各元素的間距），一般會有PSD文件，有精確的px單位，而px與rem要如何轉換才能高度還原設計圖呢 一般情況下，設計稿的寬高為： 750*1334px，而大部分流行手機的屏幕尺寸為： 375*667px，正好是一倍的關系。 手機瀏覽器的根 ...

），了解屏幕密度與各尺寸的關系有助於我們深度理解倍率的概念：《基礎知識學起來！為設計師量身打造的DPI指南 ...

1.問題描述 適配的目標：在不同尺寸的手機設備上，頁面“相對性的達到合理的展示（自適應）”或者“保持統一效果的等比縮放（看起來差不多，但不是完全等比例，對於字體我們並不喜歡等比例的去放縮）”。 問題:手機設備的尺寸不同，讓頁面在不同的手機設備上顯示的效果看起來大致相同 ...

背景 開發移動端H5頁面 面對不同分辨率的手機 面對不同屏幕尺寸的手機 視覺稿 在前端開發之前，視覺MM會給我們一個psd文件，稱之為視覺稿。 對於移動端開發而言，為了做到頁面高清的效果，視覺稿的規范往往會遵循以下兩點： 1）首先，選取一款手機的屏幕寬高 ...

前言 iPhoneX 取消了物理按鍵，改成底部小黑條，這一改動導致網頁出現了比較尷尬的屏幕適配問題。對於網頁而言，頂部（劉海部位）的適配問題瀏覽器已經做了處理，所以我們只需要關注底部與小黑條的適配問題即可（即常見的吸底導航、返回頂部等各種相對底部 fixed 定位的元素）。 筆者通過查閱了一些 ...