//現代瀏覽器本身的html根是16px，我們可以採用100/16*100% = 625%;的比例去換算rem
//這樣1rem=100px，這樣子好換算
// rem轉換px 然後適應到其他裝置原理
這裡以320px寬度的裝置為標準去劃分，其他寬度劃分類似
//然後再根據其他裝置的寬度去設定其根值font-size大小
//方式一：
//這是乙個例子
@media screen and (min-width:360px) and (max-width:374px) and (orientation:portrait)
}@media screen and (min-width:375px) and (max-width:383px) and (orientation:portrait)
}@media screen and (min-width:384px) and (max-width:399px) and (orientation:portrait)
}@media screen and (min-width:400px) and (max-width:413px) and (orientation:portrait)
}@media screen and (min-width:414px) and (max-width:431px) and (orientation:portrait)
}@media screen and (min-width:432px) and (max-width:479px) and (orientation:portrait)
}這是根據 360/320*6.25 = 7.03 =》703%;
其他依次
//方式二：
//如果是750的設計稿，即螢幕寬度為375的
//公式為 螢幕寬度/設計稿rem寬度=頁面動態font-size值（如：375/7.5=50）
320/7.5 = 42.66667;
= document.documentelement.clientwidth / 7.5 + 'px'; 設定基準值
//這樣就設定好了每個頁面的根fonts-size，因為rem單位是基於根font-size，因此只要確定一種設計稿對應手機的換算，其餘螢幕尺寸均可自動適配。
上面我們得出設計稿換算rem的基準值是100，因此只需要把設計稿上的px值除以100即為我們要的rem值。
> px/100=rem，所以100px=1rem,25px=0.25rem
// rem轉換px 然後適應到其他裝置原理
//將裝置的寬度分為10份，得到乙個基礎值
// 這裡分別是375/400/425的裝置,將裝置寬度分成10份對應
750/10 = 75px; //75px就是1rem
375的裝置 375/10 = 37.5px
400/10 = 40px;
425/10 = 42.5px;
// 原圖750寬，其中乙個盒子為75px的時候
75/75 = 1 rem;
//在325的裝置下
37.5*1 = 37.5px;
//在400的裝置下
40*1 = 40px;
//在425的裝置下
42.5*1 = 42.5px;
//原圖750寬，其中乙個盒子為30px的時候
30/75 = 0.4rem;
//375px裝置
37.5*0.4 = 15px;
在400px裝置時
40*0.4 = 16px;
在425px裝置下
42.5*0.4 = 17px;
只要動態劃分螢幕為10份設定html的font-size即可
移動端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 布局，獲取視窗的寬除以 乙...