After using the rem plug-in to adapt to the screen size in Vue project, how to solve the problem of inconsistent display effect before and after page refresh?

Analysis of the problem of inconsistency in adaptation and refresh display of Vue project

In Vue projects, it is common to use rem units combined with rem plug-ins (such as px2rem-loader) to achieve adaptive layout. However, differences in display effects are often encountered before and after page refresh. This article analyzes a common situation and its solutions.

The user configuration is as follows: in vue.config.js :

 const px2rem = require('postcss-px2rem');
const postcss = px2rem({
  remUnit: 192 //The benchmark size must be consistent with rem.js});
module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [postcss]
      }
    }
  }
};

In main.js :

 import './utils/flexible';
import { setRemInit } from './utils/rem';
setRemInit(); // Initialization

Problem manifestation: The page's initial loading performance is poor (picture omitted), the effect is normal after refreshing (picture omitted), and the font returned to the previous page becomes smaller again.

Root cause: This is usually related to the use of flexible.js , flexible.js is responsible for dynamically setting font-size of html based on the screen width. However, there is a difference between the execution timing of flexible.js and the conversion timing of px2rem-loader , resulting in inaccurate rem calculations during initial loading. In addition, not all projects such as px2rem/px2vw are suitable for scaling solutions.

Better solution: For display projects or management backends, it is recommended to adopt responsive design, preset breakpoints and component sizes for different screen sizes, and use CSS grid layout. This is more flexible than relying on scaling schemes and avoids similar problems. Invest more time in the early stage to set responsive breakpoints and component presets, lower later maintenance costs and higher project stability.

The above is the detailed content of After using the rem plug-in to adapt to the screen size in Vue project, how to solve the problem of inconsistent display effect before and after page refresh?. For more information, please follow other related articles on the PHP Chinese website!