1. 前端解析度適配
現在手機屏大小不一，而且屏幕硬體性能也各不相同，一般的UI設計都是基於特定機型畫設計搞件的，常見的是基於iPhone6的解析度設計2倍圖，以iPhone6為例，屏幕物理像素寬度是750，網頁寬度為375PX。開發中還要根據不同手機留出設計餘量，因為不同解析度的手機顯示時會有拉伸位移。
網上也有一些方案，處理高清屏適配方案，但一般也只把DPR適配到2，彩用所有長度單位放大2位，網頁整體縮放50%的的做法，比如ant-mobile就支持這種方式，它可以定義一個less常量「@hd」來定義CSS中使用的基礎單位大小，但是這種方式在遇到網頁實際寬度大於375的設備時，還是不能1：1的還源UI設計稿。
我個人在項目中採用的是更復雜的實現方式，可以實現適配DPR大於2的手機屏，並接近100%的還源UI設計稿。具體的適配技術各家大同小異，這里不再細說，我只給出我自己的適配方案。
同大多數適配方法一樣，通過 rem 設計一個基礎的大小單位 ，做為整個頁面的基礎單位，再根據屏幕物理DPR結合屏寬計算這個單位的大小，
基礎單位 = 屏幕DPR * 網頁寬度 / 375（設計稿基準為375）
網頁縮放值 = 1 / 屏幕DPR
比如我的方案是把rem設為10px 再乘以「基礎單位」，這樣在設置一個設計稿上14號字的時候，就寫 1.4rem就可以了。另外編寫頁面布局時，也用這個計算出來的相對單位，這樣可以做到不管什麼樣的屏幕，UI設計搞都不會因寬度變化而變形。另外，如果使用ant-mobile這樣的支持高清方案的UI中間件，直接在配置中把它的LESS常量 「@hd」設置 為 「0.1rem」就可以了。
另外還有一個小的福利，就是在這個方案下，當你想畫出「1物理像素」的細邊框時，直接用 「1px」，就可以了，因為在這個方案下，1px對應的是一個物理像素。
下面給出我實踐中使用的適配代碼：(這是直接放在HTML文件中的版本）
//計算屏幕比例並設置html的font-size
/**
將html字型大小設置為10個設計像素（一個基準系數，即rem為10 設計稿像素）
設計一個縮放系數，以應對可能出現的適配高清屏要求
*/
( function () {
/**初始化方法
* _standard 設計稿對應的解析度
* base_DPR 設定最小DPR值
*/
function setInitialRem( _standard, base_DPR) {
//取得當前設備DPR
var dpr = window. devicePixelRatio || 1;
//如果設定了默認最小DPR值
if ( base_DPR) {
dpr = dpr >= base_DPR ? dpr : base_DPR;
}
//設定縮放視圖比例
var scale = 1 / dpr;
//設直視圖縮放比例
document. head. querySelector( 'meta[name="viewport"]'). content = "width=device-width,initial-scale=" + scale + ",minimum-scale=" + scale + ",maximum-scale=" + scale + ",user-scalable=no, shrink-to-fit=no";
//取得當前設備寬度
var device_width = document. documentElement. clientWidth; //window.innerWidth;
//標定原稿設計基準值 當前稿件設計寬度為 iPhone6/6s 375像素
var standard_width = _standard * dpr;
//設定基準單位
var base_value = 10;
//基準系數=設備寬度➗稿件基準寬度✖️設備DPR✖️10
var rem = device_width / standard_width * dpr * base_value;
//設置 REM
document. documentElement. style. fontSize = rem + "px";
}
window. addEventListener( "resize", function () { setInitialRem( 375, 1); });
setInitialRem( 375, 1);
})();
2. UI設計稿IOS和安卓如何適配
方案一
IOS與Android共用一套效果圖 1242*2208
IOS與Android常用的尺寸中，最大尺寸的為i6+的尺寸，即1242*2208px
IOS常用尺寸為1242*2208750*1334640*1136640*960
其中750*1334640*1136640*960同為@2x，1242*2208為@3x
所以750*1334640*1136640*960隻做一套640*1136就好了
Android常用尺寸為1080*1920720*1280480*800
他們之間相鄰是可以整除1.5的，也就是1080除以1.5等於720，720除以1.5等於480
即，這三個尺寸可以等比縮放大小，只做一套1080*1920就可以了。
那麼，問題來了。
IOS要做兩套尺寸，1242*2208與640*1136
Android要做一套尺寸，1080*1920
這樣不就是三套了嗎？
其實，i6+的尺寸1242*2208整除1.15就剛好等於1080*1920
也就是說，1242*2208與1080*1920是可以等比縮放的
那麼，i6+與Android的尺寸只做一套1242*2208就可以了。
現在就剩下IOS的640*1136
1242*2208可以直接縮放成640*1136嗎？
如果要等比縮放肯定不行，因為他們之間不能整除
但是，如果我們把1242*2208的尺寸直接放到PS里等比縮小寬度到640，會發現原本2208的高度變成了1138，也就是比1136多了2px，2px的誤差其實無關緊要了，硬著頭皮改成1136去！
現在，你會發現，裡面的圖標，其實1138跟1136的大小都是一樣的。
為什麼提到圖標呢？因為我們的交付物只要一套效果圖與五套切圖就好了。
一套效果圖1242*2208
五套切圖12426401080720480
最後，注意縮放後的圖標要細調一下。由於轉換有誤差，共用一套效果圖是有一定的風險的，例如UI細節上的風險。開發前，設計師與技術人員要先共同確認此適配方案，全程溝通，及時改正UI方面的問題。
方案二
IOS與Android共用一套效果圖750*1334
上面提到，750*1334640*1136640*960同為@2x，所以750跟640用同一套圖標，同一套字體就可以了，至於其他的尺寸大小，只要跟著尺寸延伸就沒問題了。
750*1334應用到1242*2208，則需要把@2x的圖標放大導出成@3x，也就是把字體圖標放大1.5倍，其餘的，直接放大到1242就行了。
至於Android的版本，我個人的做法是把750*1334直接換算成為1080*1920，因為只有1px之差，我就忽略了。換算出了1080*1920，那麼Android的其他尺寸也就好辦啦~同樣，我們的交付物只要一套效果圖與五套切圖就好了。
一套效果圖750*1334
五套切圖12426401080720480
方案三
IOS與Android各做兩套效果圖
原理跟方案一、二差不多，但為了追求細節上的完美，可以多做一套效果圖，即兩套效果圖
1242*2208與640*1136
1242*2208適配i6+Android三種尺寸
1242*2208整除1.15等於1080*1920
1080*1920整除1.5等於720*1280
720*1280整除1.5等於480*800
640*1136適配i6i5i5s等尺寸
方案四
如果需要更完美，那就需要做三套效果圖了
1242*2208640*11361080*1920
還可以再加一套640*960
總之，分開做的越多套效果圖，出來的效果就越精細。反之，看起來可以就行了。
3. 視覺設計師怎麼與前端配合
前端工程師屬於程序員編寫代碼的，視覺設計師是做設計的通俗講究是做圖的。
前端工程師主要使用dw之類的開發工具編寫代碼、編程。
視覺設計主要是使用PS、AI、CDR之類的軟體進行圖片設計。
前端工程師的職責是製作標准優化的代碼，並增加交互動態功能，開發JavaScript以及Flash模塊，同時結合後台開發技術模擬整體效果，進行豐富互聯網的Web開發，致力於通過技術改善用戶體驗。視覺傳達設計是為現代商業服務的藝術，主要包括標志設計、廣告設計、包裝設計、店內外環境設計、企業形象設計等方面，由於這些設計都是通過視覺形象傳達給消費者的，因此稱為「視覺傳達設計」，它起著溝通企業——商品——消費者橋梁的作用。
重要的還是多溝通吧，讓想法能夠被前端理解。因為網頁和設計稿不一樣，有些效果是實現不了的，比如一些文字，顏色，陰影等，需要放棄一些或者取一些比較折中的方案。最好在設計稿上標注好各種尺寸，間距，合格的前端是會注意這些細節的。
4. pc如何自適應布局 pc端如何根據設計稿做自適應
1、在不同解析度下，頁面布局存在不同程度的差異，特別是頁面上的表單控制項，其寬度默認是固定值width:150px，當解析度較高時，表格中的空白顯得過多，頁面布局顯得很不協調，在寬屏顯示器上尤為明顯。
2、內容區採用媒體查詢+定寬，在達到某個斷點之後更改內容區的寬度，並把某個內容顯示/隱藏。 注意熱門市場這里，雖然每一個方塊的寬度是隨著斷點變化的，但是左上角的標簽和裡面長方形的白色區域在所有的屏幕下都是定寬度的，但是也可以完美的適應不同的屏幕。
3、然後在css中 有關margin和padding屬性直接用百分比來表示 頁面布局的時候都是通過百分比來定義寬度，但是高度大都是用px來固定住，所以在大屏幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長，但是高度還是和原來一樣，實際顯示非常的不協調，這就是流式布局的最致命的缺點，往往只有幾個尺寸的手機下看到的效果是令人滿意的。
4、一番辛苦做出來的網頁，在全屏狀態下瀏覽一切正常。但在改變瀏覽窗口大小之後，網頁帶頃散就變得不堪入目，這是個很值得注意的問題。 問題的根源還得從網頁的布局說起，在DW中，網頁內容的定位一般是通過表格來實現的，解決表格的問題也就成功了大半。
5、在它裡面嵌入了另外一個乎臘表格，表格寬度占表格單元的50%，則這個表格的寬度為300，上面說過rem是通過根元素進行適配的，網頁中的根元素指的是html我們通過設置html的字體大小就可以控制rem的大小。
6、瀏覽器的功能設置中，有一個可以自由設置窗口內容字體大小的功能，這樣由於不同訪問者的設置習慣不同，呈現在他們面前的網頁有時也會不不相同。比如你可能本來設計時用的是2號字體，結果由於用戶對瀏覽器的額外設定，變的更大蠢氏了
5. 前端一套代碼實現多端適配 有哪些方案
Taro 是京東開源的一套遵循 React 語法規范的多端開發解決方案。通過它，我們只需要書寫一次代碼，就可以編譯出在不同端（微信 / 網路 / 支付寶小程序、H5、React-Native 等）都能運行的代碼。如果你接觸過 React-Native，那麼上手 Taro 將會非常方便。
6. 前端如何實現視覺設計稿
在這篇文章中將和大家探討一下關於前端在移動端開發如何去實現視覺設計稿。探討過後，在大家的實際工作中或許能幫助解決一些問題。
一般設計稿是 640px 或者 750px （現在最流行），但是 iPhone 5 不是 320px 寬嗎，iPhone 6 不是 375px 寬嗎?
這里需要理解一下基礎概念： 設備像素 (device pixel)， CSS 像素 (css pixel)以及 設備像素比 (device pixel ratio)。
垂直手機屏幕下，使用 <meta name="viewport" content="width=device-width"/> ，iPhone 5 屏幕物理像素 640 像素，獨立像素還是 320 像素，因此， window.devicePixelRatio 等於 2。
比如 iPhone 5，6 使用的是 Retina 視網膜屏幕（2 倍屏），6 Plus 是 3 倍屏，使用 2px × 2px 的 device pixel 代表 1px × 1px 的 css pixel，所以設備像素數為 640 × 1136px （5）， 750 × 1134 （6），而 CSS 邏輯像素數為 320 x 568px （5）， 375 × 667 （6）；5，6 的 window.devicePixelRatio=2，6 Plus 為 3。
H5 適配：rem 方案
rem：是 CSS3 新增的一個相對單位，相對於 html 標簽的 font-size 的大小為基礎的。而 font-size 的大小可以動態根據手機屏幕寬度document.documentElement.clientWidth 來設置，從而達到自適應屏幕的目的。
我這里找了一下 小米 ， 網易 ， 拉勾網 ， 手淘 以及糯米，大同小異。
設計稿是 720px 的，即 5 英寸屏幕的安卓手機（720 x 1280px）。
對於頁面縮放和橫豎屏事件進行監聽，改變 html 根元素字體 clientWidth/720/100 。
如圖是這樣計算的 375/(720/100) = 52.0833
iPhone 6 : 375/7.5=50 , 則知道設計稿應該是基於 iPhone 6 來的，所以它的設計稿豎直放時的橫向解析度為 750px，為了計算方便，取一個 100px 的 font-size 為參照，那麼 body 元素的寬度就可以設置為 width: 7.5rem ，於是 html 的 font-size=deviceWidth / 7.5 。布局時，設計圖標注的尺寸除以 100 得到 css 中的尺寸。並且布局中的 font-size 也可用 rem 單位。
設置html根元素字體為 65.5% ，對應px單位則為 10.48px ，則列表裡時間信息字體設置為 1rem = 10.48px ，chrome在 -webkit-text-size-adjust: 100%; 情況下小於 12px 的一律顯示為 12px 。
拉勾網頁面列表部分是 px 為單位，字體是 rem ，底部bar是使用 百分百 來控制寬高間距。
之前網上討論的比較多的是
則 1em = 16px * 62.5% = 10px ，em 的初始值為 1em = 16px ，而為了方便計算， 換算一下 10 / 16 （16px 是 Chrome 瀏覽器默認字體大小）。缺點是進行任何元素設置，都有可能需要知道他父元素的大小，比較繁瑣低效。
（1）動態設置 viewport的scale
（2）動態計算 html 的 font-size
（3）布局的時候，各元素的 css 尺寸 = 設計稿標注尺寸/設計稿橫向解析度/10
設計稿是 750 的，所以 html 的 font-size 就是 75，如果某個元素是 150px的寬，換算成 rem 就是 150 / 75 = 2rem。
整個手淘設計師和前端開發的適配協作基本思路是：
手淘推出了一套移動端適配的方案—— Flexible 方案 。
總結來說：
設計稿是 750 的。
優點：簡單粗暴，所有 css 尺寸均為設計稿尺寸直接除 2，開發快速簡單；
缺點：可能出現一排放不下的情況，需要針對小屏幕如 5 及以下做單獨適配
vw 相對於視窗的寬度：視窗寬度是 100vw 。
如果視區寬度是 100vm, 則 1vm 是視區寬度的 1/100, 也就是 1%，類似於 width: 1%。
那 iPhone 6 來說， document.documentElement.clientWidth=375 , 則豆腐塊寬度為 375/100*30=112.5px
混合: rem px vw 百分百等單位混用
略，同上糯米WAP
這里假設設計稿 640px，則設置根元素 font-size 為 4.375vw，根據屏幕寬度自適應，在視窗寬度為 320px 的時候，正好是 14px (14 / 320 = 0.04375)。 達到頁面默認字體大小 14px 的目的（其他大小也 ok）。好了，現在頁面上所有以 rem 為單位的屬性值都會隨著屏幕的寬度變化而變化，達到自適應的目的。（ 自適應不用 js 動態設置根元素大小 ）
在移動端頁面開發中，視覺童鞋一般會用 750px（iPhone 6）來出設計稿，然後要求 FE 童鞋能夠做到頁面是自適應屏幕的，這種情況下就可以用 rem 或者 vm 等相對單位來做適配，愉快和視覺童鞋一起玩耍啦。
內容轉自： 大專欄
7. 前端技術，屏幕適配技術怎麼做
屏幕適配有兩種方法：
1.把頁面做成100%自動，頁面隨屏幕的大小而變化，屏幕多大頁面多大。
2.通過媒體查詢來判斷屏幕的大小，根據不同大小的屏幕載入不同樣式。
8. 【轉】一套iOS平台設計稿，搞定界面適配
加上Android生態中紛繁復雜的各種奇葩尺寸，現在APP設計開發必須考慮適配大、中、小三種屏幕。所以如何做到交付一套設計稿解決適配大中小三屏的問題？設計和開發之間採用什麼協作模式？一個基本思路是：
1、選擇一種尺寸作為設計和開發基準；
2、定義一套適配規則，自動適配剩下兩種尺寸；
3、特殊適配效果給出設計效果。
手機淘寶的iPhone 6/iPhone 6 Plus適配版本即將提交App store審核。先曬一下我們採用的協作模式，再慢慢說明原委。
第一步，視覺設計階段，設計師按寬度750px（iPhone 6）做設計稿，除圖片外所有設計元素用矢量路徑來做。設計定稿後在750px的設計稿上做標注，輸出標注圖。同時等比放大1.5倍生成寬度1125px的設計稿，在1125px的稿子里切圖。
第二步，輸出兩個交付物給開發工程師：一個是程序用到的@3x切圖資源，另一個是寬度750px的設計標注圖。
第三步，開發工程師拿到750px標注圖和@3x切圖資源，完成iPhone 6（375pt）的界面開發。此階段不能用固定寬度的方式開發界面，得用自動布局（auto layout），方便後續適配到其它尺寸。
第四步，適配調試階段，基於iPhone 6的界面效果，分別向上向下調試iPhone 6 plus（414pt）和iPhone 5S及以下（320pt）的界面效果。由此完成大中小三屏適配。
為什麼選擇iPhone 6作為基準尺寸？
當面對大中小三種屏幕需要適配的時候，很容易想到先做好一種屏幕，再去適配剩下兩種屏幕。第一個決定是到底以哪種屏幕作為設計和開發的基準尺寸。我們選擇中間尺寸的iPhone 6（750px/375pt）作為基準，基於幾個原因：
1、從中間尺寸向上和向下適配的時候界面調整的幅度最小。375pt下的設計效果適配到414pt和320pt偏差不會太大。假設以414pt為基準做出很優雅的設計，到320pt可能元素之間比例就不是那麼回事了，比如圖片和文字之間視覺比例可能失調。
2、iPhone 6 plus有兩種顯示模式，標准模式解析度為1242x2208，放大模式解析度為1125x2001（即iPhone 6的1.5倍）。可見官方系統里iPhone 6和iPhone 6 plus解析度之間就存在1.5倍的倍率關系。很多情況下這兩種尺寸可以用1.5倍直接等比適配。
3、1242x2208這個奇葩的數值亂差頌是蘋果官方都不願意公開宣傳的一個解析度，不便於記憶和計算柵格。640x1136雖然是廣泛應用的一個解析度，但是大屏時代依然以小尺寸嘩鄭為設計基準顯然不合時宜，設計師會停留在小屏的視角做設計。
所以，iPhone6的750x1334是最適合基準尺寸。
只交付一套設計稿，默認用什麼規則來適慶逗配？
前文提到適配策略是先選擇iPhone 6作為基準設計尺寸，然後通過一套適配規則自動適配到另外兩種尺寸。這套適配規則總結起來就一句話：文字流式，控制項彈性，圖片等比縮放。
控制項彈性指的是，navigation、cell、bar等適配過程中垂直方向上高度不變；水平方向寬度變化時，通過調整元素間距或元素右對齊的方式實現自適應。這樣屏幕越大，在垂直方向上可以顯示更多內容，發揮大屏幕的優勢。
按照上述默認適配規則，大中小三種屏幕顯示效果均相同。有時候想在大屏幕顯示更多內容，需要設計出特殊適配效果。比如App store首頁焦點圖，從iPhone 6適配到iPhone 6 plus時焦點圖尺寸和排版做了特殊處理。底下應用列表也從一排3+個變成一排4+個，真正實現了大屏幕顯示更多內容的理念。這些就需要設計師給出相應設計稿。