移動端rem適配

3 使用js

將設計圖劃分為10等份或者15等份。

新建common.less檔案，這是乙個專門來適配的檔案。

我們大概可以寫如下的檔案

// 設定常見的螢幕尺寸 修改裡面的html文字大小

a// 一定要寫到最上面
html
// 我們此次定義的劃分的份數 為 15
@no: 15;
// 320
@media screen and (
min-width
: 320px) }
// 360
@media screen and (
min-width
: 360px) }
// 375 iphone 678
@media screen and (
min-width
: 375px) }
// 384
@media screen and (
min-width
: 384px) }
// 400
@media screen and (
min-width
: 400px) }
// 414
@media screen and (
min-width
: 414px) }
// 424
@media screen and (
min-width
: 424px) }
// 480
@media screen and (
min-width
: 480px) }
// 540
@media screen and (
min-width
: 540px) }
// 720
@media screen and (
min-width
: 720px) }
// 750
@media screen and (
min-width
: 750px)
}

@media screen and (

min-width
: 750px)
}

/*設定basefont，比如說我們分成15份乙份為50px*/

@basefont
:50/*使用的時候*/
.box

使用js比較簡單，我們只需要加上以下**便可，這樣我們就實現了等比的問題

const flag = 份數;(

function
(flag)
' document.head.
(stylenode)})
(flag)

;

(function()
' document.head.
(stylenode)
}computedfont()
addeventlistener
('resize'
, computedfont)})
()

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

關於rem適配移動端

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