短視訊商城系統,px如何轉換rem,且可等比例縮放頁面

zhibo系統開發發表於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,且可等比例縮放頁面, 更多內容歡迎關注之後的文章


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69978258/viewspace-2894851/,如需轉載,請註明出處,否則將追究法律責任。

相關文章