一稿設計多端適配優雅的解決方案
阿新 • • 發佈:2018-12-21
規範目的
為提高前端團隊開發效率,輸出高質量的前端頁面程式碼,提高UI設計還原度,特編寫該規範文件。本文件如有不對或者不合適的地方請及時提出。
JS程式碼塊
(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; if (clientWidth >= 750) { docEl.style.fontSize = '100px'; } else { docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'; } }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window);
使用方法
ui設計師設計介面時建議以iphone6的兩倍尺寸(750px)為設計標準尺寸,前端開發在開發頁面先引用上述程式碼塊,前端開發在選擇標註時仍按照標準px來標註,為了計算方便js程式碼塊中乘以100,在css中為實際尺寸只需要除以100即為rem的值。
注意事項
如果設計稿尺寸寬不為750px則程式碼塊要做相應修改。此適配方法最好用在移動裝置上。
參考文件