移動端適配rem

2022-04-09 23:23:11 字數 674 閱讀 6665

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 布局,獲取視窗的寬除以 「乙個數 」  16,15,20,50,7.5,10.8,隨便你寫那個

每當在ps 裡面量乙個 div 的高,你就得心裡或者在計算器算一遍,比如div 高65,轉換成rem 是多少呢,

比如在  iphone5 螢幕寬320 , 320➗16=20 所以 1rem就是20px,

比如乙個div 高65px

65/20=3.25rem ,算起來費勁

2.解決方法 less

如果是750 的設計圖,750/15=50,在750的視窗下,1rem=50px

在less 加上一句話

@r:50rem;

接下來 設計圖量多高就寫多高,

比如div高  88px

divhtml>

>

>

移動端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適配移動端

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