關於rem適配移動端

2021-08-01 00:08:51 字數 381 閱讀 2313

(function(doc, win) ;

if (!doc.addeventlistener) return;

win.addeventlistener(resizeevt, recalc, false);

doc.addeventlistener('domcontentloaded', recalc, false);

})(document, window);

關於移動端不同解析度的問題,現在我們可以用rem來解決,rem說白了也就是根元素的字型大小

html的font-zise為60px;那麼1rem就是60px;此檔案中16rem為全屏,也就是我們ipone5為320px ,那麼20px就為1rem,現在我們可以按照我們的設計稿來進行移動端的適配!

移動端rem適配

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

移動端rem適配

前端在開發移動端頁面時,通常會使用rem對不同解析度的 螢幕進行適配,以達到更好的視覺效果。直接貼上 複製可用。一 function doc,win 乘以100,px rem 100 1 docel.style.fontsize 100 width uidpr px recalc if doc.ad...

移動端適配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 布局,獲取視窗的寬除以 乙...