為什么在Vue中使用rem插件后需要刷新才能自適應屏幕大小？

vue項目rem插件自適應問題：刷新后才生效

在vue項目中，為了實現頁面內容自適應不同屏幕大小，許多開發者會使用rem插件（例如px2rem-loader）。然而，常見問題是：頁面只有刷新后才能正確自適應。

問題描述

項目配置如下：

vue.config.JS:

const px2rem = require('postcss-px2rem'); const postcss = px2rem({   remUnit: 192 //基準大小，需與rem.js一致 }); module.exports = {   css: {     loaderOptions: {       postcss: {         plugins: [postcss]       }     }   } };

main.js:

立即學習“前端免費學習筆記（深入）”；

import './utils/flexible'; import { setRemInit } from './utils/rem'; setRemInit(); // 初始化

實際情況：頁面初次加載時顯示效果不正確（預期效果未達到）。刷新后，頁面才顯示正確。返回前一頁面，字體大小又會變回錯誤大小，無法保持自適應。

刷新前： （這里應有刷新前的圖片）

刷新后（預期效果）： （這里應有刷新后的圖片）

解決方法及建議

雖然通常需要flexible.js配合px2rem-loader，但我們不建議在大多數項目中使用px2rem/px2vw這種縮放布局方案進行屏幕適配，除非是數據大屏等特殊項目。

對于展示型項目和管理后臺，建議前期規劃好UI主題的響應式斷點和各尺寸組件預設，并使用CSS柵格布局來實現屏幕適配。這種方法能避免類似問題，并確保項目在各種設備上的良好顯示效果。 這需要前期投入更多時間，但長期來看更穩定可靠。

以上就是