rem：是指相對于根元素字體大小的單位，一個相對單位。rem可以做到隨著根元素的字體大小隨之變化，達到自適應屏幕的效果。

使用步驟如下：

1、在html的head中加上meta標簽

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

代表寬度是設備寬度，同時不允許縮放。
2、設置根元素——相對于根元素html

html {font-size: 100px;} //100px方便計算，實際值需要自己確定

設置這個值，谷歌瀏覽器不會受影響，當是IE瀏覽器等時，會受影響，根據實際去調整值。
3、計算不同屏幕時根元素
可以使用媒體監聽，也可以使用動態js計算，本文因為不確定自適應數量使用動態計算

var deviceWidth setHtmlFontSize()if (window.addEventListener) {window.addEventListener('resize', function () {setHtmlFontSize()}, false) } function setHtmlFontSize () {// 1366是設計稿的寬度，當大于1366時采用1366寬度，比例也是除以13.66deviceWidth = document.documentElement.clientWidth > 1366 ? 1366 : document.documentElement.clientWidthdocument.getElementsByTagName('html')[0].style.cssText = 'font-size:' + deviceWidth / 13.66 + 'px !important' } var deviceWidth; setHtmlFontSize(); function setHtmlFontSize() {let deviceWidth = document.documentElement.clientWidth;document.getElementsByTagName("html")[0].style.cssText ="font-size:" + deviceWidth / 11 + "px !important";}

4、根據高保真還原
每個單位大小用實際值除以100得到相對的rem值。

文章鏈接

總結

以上是生活随笔為你收集整理的PC端自适应-rem的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。