短視訊商城系統,px如何轉換rem,且可等比例縮放頁面
阿新 • • 發佈:2022-05-17
短視訊商城系統,px如何轉換rem,且可等比例縮放頁面
第一步:
在專案根目錄下中找到src資料夾,在src檔案下中找到assets資料夾,
在assets資料夾下新建一個js資料夾,在js檔案新建一個rem.js
第二步:
在rem.js中寫入以下程式碼:
(function (draftWidth, n) {
function getRem() {
var html = document.querySelector("html");
var w = document.body.clientWidth || document.documentElement.clientWidth;
var rem = (w / draftWidth) * n;
// html.style.fontSize = rem + "px";
//982:平板尺寸
//適配pc端自適應縮放
if (w > 982) {
html.style.fontSize = 85 + "px";
} else {
html.style.fontSize = rem + "px";
}
}
getRem();
window.addEventListener("resize", function () {
getRem();
});
})(1920, 100);
第三步:
在專案根目錄下找到main.js,
在main.js中引入rem.js
加入以下程式碼
import '@/asses/js/rem.js'
第四步:
在需要用到fone-size的頁面,裡面進行px轉換成rem
轉換 》》》 1px = .1rem (100轉換)
以上就是短視訊商城系統,px如何轉換rem,且可等比例縮放頁面, 更多內容歡迎關注之後的文章