這兩天學(xué)的是自適應(yīng)，代碼有點(diǎn)亂。而且這幾天忙著寫實(shí)習(xí)報(bào)告，也沒有時(shí)間去整理。

　　但是，這下面代碼吧，是可以獲取html的font-size值的，然后用來設(shè)置相對(duì)單位rem的從而達(dá)到自適應(yīng)效果的；看到紅色的width了吧，把它改成你屏幕寬度就好，比如我的是1920px；那么這樣算出來html{font-size：600px}； 這樣的話你要設(shè)置其他元素的rem，比如span{font-size：12px；}，要自適應(yīng)就用12/600，就是0.02rem，span{font-size：0.02rem；}這樣你的span字體就隨屏幕大小也變了，或者你要設(shè)置圖片啊傻的，也是用它的寬或者高除于600。

　　至于你要pc端和手機(jī)端分開效果什么的，用@media分別寫CSS樣式就哦了。

?<script>
??????? !(function(doc, win) {
??????????? var docEle = doc.documentElement,//獲取html元素
??????????????? event = "onorientationchange" in window ? "orientationchange" : "resize",//判斷是屏幕旋轉(zhuǎn)還是resize;
??????????????? fn = function() {
??????????????????? var width = docEle.clientWidth;
??????????????????? width && (docEle.style.fontSize = 100? * (width / 320) + "px");//設(shè)置html的fontSize，隨著event的改變而改變。
??????????????? };
?????????? ?
??????????? win.addEventListener(event, fn, false);
??????????? doc.addEventListener("DOMContentLoaded", fn, false);
?????? ?
??????? }(document, window));
??? </script>

轉(zhuǎn)載于:https://www.cnblogs.com/liaoliao985786516/p/5605274.html

總結(jié)

以上是生活随笔為你收集整理的rem 之js代码获取font-size值（适合移动手机端）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。