移動端rem適配

2021-10-23 21:22:26 字數 500 閱讀 3230

前端在開發移動端頁面時,通常會使用rem對不同解析度的

螢幕進行適配,以達到更好的視覺效果。

直接貼上**,複製可用。

一:

(function(doc, win) 

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

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

}; recalc()

if(!doc.addeventlistener) return;

win.addeventlistener(resizeevt, recalc, false);

})(document, window);

**解析:

根據不同尺寸的設計圖進行配置。

若設計圖是750的,那麼uidpr 就設定為750。

在移動端顯示尺寸對應關係(375*667):100px = 1rem

二:amfe-flexible

移動端rem適配

3 使用js 將設計圖劃分為10等份或者15等份。新建common.less檔案,這是乙個專門來適配的檔案。我們大概可以寫如下的檔案 設定常見的螢幕尺寸 修改裡面的html文字大小 a 一定要寫到最上面 html 我們此次定義的劃分的份數 為 15 no 15 320 media screen an...

移動端適配rem

p.p1 p.p2 p.p3 p.p4 p.p5 span.s1 span.s2 span.s3 span.s4 span.s5 span.s6 span.s7 span.s8 span.s9 span.s10 span.s11 span.s12 現在前端大多數是用rem 布局,獲取視窗的寬除以 乙...

關於rem適配移動端

function doc,win if doc.addeventlistener return win.addeventlistener resizeevt,recalc,false doc.addeventlistener domcontentloaded recalc,false documen...