一稿設計,多端適配優雅的解決方案 rem

2021-09-02 19:03:16 字數 776 閱讀 5249

規範目的

為提高前端團隊開發效率,輸出高質量的前端頁面**,提高ui設計還原度,特編寫該規範文件。本文件如有不對或者不合適的地方請及時提出。

js**塊

function (doc, win)  else 

};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)。

如圖:標題欄在標註中高度為88px在頁面css裡實際為88/100=0.88rem

注意事項

參考文件

關於多屏適配的解決方案

很多面試會問到關於多屏適配的相關問題並且該怎麼處理,同時要在不同dpr下顯示的效果都一致,那麼我們該怎麼處理的他 很多人立刻想到了rem,利用分別率進行處理。在不同的解析度下進行處理。可是,大家又會想到了,怎樣要對它不同分辯綠下,寫css。那麼效率來說,會不會很差。當然對於大公司的來說,有強大的前端...

遞迴 一種優雅的問題解決方案

再講遞迴之前先講乙個我們小時候都聽過的故事,從前有座山.山里有座廟.廟裡有個老和尚和小和尚.老和尚對小和尚說 從前有座山.山里有座廟.廟裡有個老和尚和小和尚.老和尚對小和尚說 從前有座山.山里有座廟.廟裡有個老和尚和小和 好吧。緊張套娃?這種理念就是遞迴,希望能助你理解。public class f...

關於乙個換膚系統的設計解決方案 一

好久沒有寫過文章了,這篇文章分享的是設計乙個基於原有ui繪畫架構的換膚系統,當然,這裡做的僅僅是乙個解決方案設計和實現,深入的繪畫用的是已有的東西 當然著色和色相變換是我新增的 這套東西我叫theme系統,這個系統可以分為乙個主控制體和三個輔助控制部分 類中包含兩個map,乙個為不換膚的ui obj...