How to use rem to control font size in Vue3

vue3 uses rem to control font size

Method 1

Need to write a listening event in

【Note】: There are specific methods to obtain html and body

  <script>
    let tid = null;
    function resizeWindow() {
      const docEl = ;
      //The length of the current page      const HtmlDom = ().width;
      //Set rem       = HtmlDom / 192 + "px";
    }
    ("resize", () => {
      (tid);
      tid = (resizeWindow, 300);
    });
    resizeWindow();
  </script>

Record vue to use rem to achieve dynamic page response

Rem adaptation introduction

According to the definition of 1rem in the W3C specification:

1rem and the calculated value equal to the root element font-size. When the font-size of the root element is clearly specified, the rem unit uses the initial value of the attribute as a reference.

This means that 1rem is equal to the font size of the html element (the font size of most browser root elements is 16px)

compatibility

• ios: 6.1 system and above support
• Android: 2.1 system and above support

Most mainstream browsers support it, so you can read it with peace of mind

rem：（font size of the root element）

It means setting the font size according to the root element of the web page. The difference between it and em (font size of the element) is that em is set according to the font size of its parent element, while rem is setting the font size according to the root element of the web page (html). To give a simple example,

Nowadays, most browsers, such as IE9+, Firefox, Chrome, Safari, and Opera, if we do not modify the relevant font configuration, the default font-size is 16px.

For example:

    //Suppose I set the size of the root element to 16px    html{
         font-size：16px
    }
    //Then the p tag below is 16 pixels if I want it    p{
         font-size:1rem
    }
    //That's it

Practical operation

1. Create

// Rem etc. adapt to configuration file//Basic sizeconst baseSize = 16;
// Set the rem functionfunction setRem() {
  // The current page width is scaled by 1920 width, which can be modified according to your needs.  const scale =  / 1920;
  // Set the font size of the page root node ("(scale, 2)" means that the maximum magnification ratio is 2, which can be adjusted according to actual business needs)   =
    baseSize * (scale, 2) + "px";
}
// InitializationsetRem();
// Reset rem when changing the browser window size = function() {
  setRem();
};

2. Introduce

import './libs/'

3. Page usage

Try to use percentages on the page layout, and try to use rem for all other configurations, especially for the font size.

<div >I'm adivLabel</div>

#div1{    
 // width:100%;
  font-size: 1rem;  
  width: 16rem;   
  height: 2rem; 
  background-color: lawngreen;
}

In this way, when the page changes, the text in the div will also change.

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.