移動端如何進行rem的適配

2021-10-17 19:13:56 字數 622 閱讀 9553

網上很多都說會pc網頁開發,也就會了mobile網頁開發。那麼實際呢也是如此,但是對於新手來說卻摸不著頭腦無從下手,一直糾結於適配的問題,那麼這裡就來展示下rem適配。

展示rem適配**

//rem適配

(function () ';

})();

如果設計師給的圖是750px;那麼1rem就是750/16=46.875px;也就是1rem代表46.875px;那如果在css中要寫

.box
要怎麼寫呢?這麼寫

.box
呃呃,這個1.28怎麼來的?60px/46.875px*1rem = 1.28rem就是這麼來的。

曉得沒呢,那這樣是不是每乙個px轉rem都要這麼算呢?

沒錯,就是都要這麼算,那是不是很麻煩呢,哈哈,不要著急,這個時候呢就有了less編譯等

這裡就以less編譯舉個例子:

index.less

@rem:46.875rem;

body

編譯後

index.css

body

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