rem適配還原設計稿,換算

2022-07-29 01:06:10 字數 782 閱讀 9687

假設設計妹妹給我們的設計稿尺寸為 750 * 1500 。結合網易移動端首頁html元素上的動態font-size屬性、設計稿尺寸、前端與設計之間協作流程一般分為下面兩種:

1、網易做法

引入:頁面開頭出引入下面這段**,用於動態計算font-size

1 (function

(doc, win)

19//

乘以100,px : rem = 100 : 1

20 docel.style.fontsize = 100 * (width / 750) + 'px';

21};

22recalc()

23if (!doc.addeventlistener) return

;24 win.addeventlistener(resizeevt, recalc, false

);25 })(document, window);

使用:未引入前:

body

引入後:除以100並將px換成rem

body

換算的依據:

1

//乘以100,px : rem = 100 : 1

2var recalc = function

() 7

//乘以100,px : rem = 100 : 1

8 docel.style.fontsize = 100 * (width / 750) + 'px';

9 };

rem還原設計稿

使用閉包的方式把window物件傳入,獲取html物件,獲取html元素根物件,把750和100宣告乙個變數 orientationchange監聽手機移動裝置橫屏和豎屏事件 resize監聽瀏覽器大小變化事件 domcontentloaded是網頁載入完之後繫結的事件 事件分為捕獲和冒泡,第三個引...

zTree 還原設計稿 樹結構樣式(1)

在使用ztree控制項時,不可避免的會要根據設計稿完成對控制項原有樣式的覆蓋 下面是設計稿的樹樣式 這裡面的問題是後面節點背景條的實現 下面看下ztree初始化的 這裡對li標籤下的ul標籤進行padding left的設定,形成子節點的縮排 那我們的就不能只針對這裡的li標籤進行背景設定 解決 1...

rem 針對設計稿寬度,設計rem除錯比例

rem是css單位,rem是根據根html元素的字型大小來計算單位的。瀏覽器預設的 html font size 16px,這樣如果我們需要設定字型的大小為12px,通過計算可知 12 16 0.75 因此只需要設定 font size 0.75rem。1 現在頁面上設定使用者禁止縮放 引入meta...