1. 設計稿的單位是什麼，一般大小是什麼？
2. 頁面長度單位用什麼，px、em、rem，還是混合，如果用rem，html的font-size是多少？
3. 設計稿轉換成頁面長度的方法？
4. 如果做**查詢，合適的區間是什麼？
ps：他們都已設定viewport
q&a
1. 設計稿的單位是px，一般是750px。
2. px、rem混合著用，rem的html font-size用16px。
3. 750px的設計圖以375px量長寬，例如設計圖裡有元素寬度是100px，那麼得到寬度會是 100px/2/16px = 3.125rem。
4. 根據裝置寬度不同，設定不同的html 的font-size，這個區間並沒說明。
--濱神（唯品會）回答
1. 設計稿的單位是px，一般是 750px。
2. 限制用rem，rem的html font-size用312.5%（由於預設字型大小是16px，所以最終是16px * 312.5% = 50px）。
3. 750px的設計圖以375px量長寬，例如設計圖裡有元素寬度是100px，那麼得到寬度會是 100px/2/50px = 1rem。
4. 如果設定固定html font-size，那麼就需要弄**查詢；如果按不同裝置寬度算出各自的font-size，就不用弄**查詢。
--深哥（公司大神）回答
1. 設計稿的單位是px，一般是1080px。
2. 建議是全部使用rem及百分比的方式，rem的html font-size用100px。
3. 1080px的設計圖以540px量長寬，例如設計圖裡有元素寬度是100px，那麼得到寬度會是 100px/2/100px = 0.5rem。
4. 按不同裝置寬度算出各自的font-size，如果需要相容特殊裝置（例如ipad），才要做**查詢。如果在ipad上的效果偏大，就要修改小一點字型，一般是76px，就可以跟手機差不多保持一致的效果了。
--得出結論
1. 設計稿的單位是px（photoshop出來當然是這個）。
2. 沒人頁面長度用em。
3. 元素長寬量取是設計圖裡的1/2。
這三個結論還並不能得出乙個好的方案。
假設
為了簡化問題，做乙個假設，假如世界上只有一種手機型號（恰好是iphone6），那設計稿轉換的方式是怎麼樣的？
（1）. 有張750px的設計稿，iphone6的裝置寬度375，取375為量取大小。
（2）. 那麼設計稿裡面100px，在iphone6顯示為100px / (750 /375 ) = 50px。
（3）. 規定乙個html font-size值 x（例如50px），那rem值就是 (50/x) rem （例如 50px/ 50px = 1rem）
這裡面可以很明顯看到，font-size值並沒有規定要用哪個值，它只是乙個基數，元素的畫素大小並不會因為這個基數有變化（所以上面問了三個人有三個不同的值，這沒問題的）。也由於我們以375量取大小，所以在iphone6上效果是與設計稿一致的。另外不是rem也是可以的（第三步不做），直接用px， 更加簡單。
假設破滅
世界上當然有很多亂七八糟的機型，那如何在上面的基礎上做適配？
（1）. 假如用的是px單位，又不做**查詢做適配。那麼可能在某些機型上偏大偏小，但是還能用。之所以可以這麼幹，是因為手機的裝置寬度一般是在320-470之間，與375產生的偏差效果並不會很大，當然偏差越大差異越大。
（2）. 假如用的是px單位，**查詢做適配。雖然這麼做能適配機型，讓效果看起來都差不多，但是做起來應該很痛苦，每個固定長度的元素都要寫一遍，這會是很要命的吧。
（3）. 假如用的是rem單位，不動態計算font-size值，不做**查詢。我靠，那這不是跟第一種情況一樣。
（4）. 假如用的是rem單位，動態計算font-size值。計算方式如下：
var basesize = 50, //這裡我有一點沒有說是， 這個計算公式是viewport設定initial-scale=1的情況，如果是其他縮放比例，那就需要乘以這個縮放比例。基數 basewidth = 375, //
量取值大小
fontsize = (document.documentelement.clientwidth / basewidth * basesize).tofixed(2) ; //
這個就是動態font-size值
例如：**移動版）
其viewport：
<其fontsize計算方式：meta
name
="viewport"
content
="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no"
>
var basesize = 75, //這裡面關鍵的是那個375的基礎量取值，當取375時，頁面效果在裝置寬度為375就必須顯示正常，這個是很關鍵的約定。基數 basewidth = 375, //
量取值大小
fontsize = (document.documentelement.clientwidth / basewidth * basesize * 0.5 ).tofixed(2) ;
（5）. 假如用的是rem單位，**查詢做適配。 在各個**查詢的區間設定適當的font-size，沒什麼特別的。
最終方案
根據上面的情況，我覺得轉換的方式可以用下面步驟。
（1）. 設計稿應有約定的大小（例750px），選取乙個手機的裝置寬度做量取大小值（例375）。
（2）. 限制使用rem，選取乙個font-size值作為的基數。
（3）. 計算每個元素的rem值，進行介面開發。
（4）. js計算當前裝置寬度的fontsize，並設定回html元素上。（適配步驟）
（5）. **查詢作為補救措施，特殊裝置寬度設定特殊的font-size。（這步不是必須的）
注意
（1）. px可以用，但是當心效果會偏大或偏小，元素可能還會往下掉。
（2）. 介面開發時只針對iphone6（375pt）一種機型，頁面完成後，才做適配步驟。
（3）. 設計師可能會輸出標註圖（750px）和@3x切圖（1125px）兩種圖。用@3x切圖的設計稿切圖，在超清螢幕才能清晰；標註圖可用來計算元素長寬；但是設計師可能為了簡單，就只輸出一種視覺圖，就如文章開頭說的750px、1080px。
（4）. 使用sass或less可以讓**寫得直觀、簡單。
例如：
padding: rem(5) rem(15) 0 rem(15);這樣尺寸都是對應的設計稿的尺寸，開發人員就不用關心裡面的實現細節了。
總結
設計稿轉換頁面單位尺寸，簡單做就是——先針對某個機型做，再做適配。
src="" allowfullscreen="" frameborder="0" height="498" width="510">
src="" allowfullscreen="" frameborder="0" height="498" width="510">
移動端h5頁面的設計稿尺寸
那麼多手機螢幕尺寸，設計稿應該按照哪乙個尺寸作為標準尺寸。現在已經有2k解析度的手機螢幕了，設計稿是不是也要把寬高跟著最大解析度來設計。顯然不是。請注意 以下所有討論內容和規範均將viewport設定為content width device width 的情況下 也就是我們的h5頁面前端 裡面必須...
移動端根據設計稿寬度適配 px轉換相對單位rem
為了計算方便，一般建議1rem 100px 設計稿px 要換算這樣的比例需要設定html對應的fontsize，計算規則如下 fontsize 螢幕寬度 設計稿寬度 基本寬度 如果基本寬度是100，那麼1rem 100px 設計稿px 假如設計稿寬度是 750px 開發以iphone6 7 8為例，...
移動端H5頁面的設計稿尺寸大小規範
那麼多手機螢幕尺寸，設計稿應該按照哪乙個尺寸作為標準尺寸。現在已經有2k解析度的手機螢幕了，設計稿是不是也要把寬高跟著最大解析度來設計。顯然不是。請注意 以下所有討論內容和規範均將viewport設定為content width device width 的情況下 也就是我們的h5頁面前端 裡面必須...