About 3 common packages of rem adaptation

About 3 common packages of rem adaptation

Preface

I wrote an article about rem adaptation before, but I didn’t give a specific package. Today, I will give three commonly used methods and share them for your reference. Let’s learn with the editor.

1. rem1.js

The first method takes into account the problem of screen rotation on the m-side. Some processing has been done for compatibility, see the code for details.

export function rem (doc, win) {
  let docEl = doc.documentElement;
  //Considering and being compatible with screen rotation events let resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
  let recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            if (clientWidth >= 750) {
                 docEl.style.fontSize = '100px';
            } else {
                 docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
            }
      };

   if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false); // Adapt to screen size and rotation doc.addEventListener('DOMContentLoaded', recalc, false); // Adapt to the page when it is first opened recalc();
};

2. rem2.js

The offsetWidth length of the HTML tag is used for calculation.

export function rem() {
  var fz = document.querySelector('html').offsetWidth / 7.5; //Design drawing 750 1rem=100px
  document.querySelector('html').style.fontSize =
    fz <= 100 ? fz + 'px' : '100px';
  window.onresize = function() {
    rem();
  };
};

3. rem3.js

Using window.innerWidth to calculate, body fontSize is set to prevent font inheritance, making the page font too large.

export function rem() {
  document.documentElement.style.fontSize = window.innerWidth / 7.5 + 'px'; //1rem = 100px
  document.body.style.fontSize = '14px'; // Restore the font size on the body to avoid oversized fonts without style on the page}

Summarize

The above is the full content of this article. I hope that the content of this article will have certain reference learning value for your study or work. If you have any questions, you can leave a message to communicate. Thank you for your support for 123WORDPRESS.COM.

<<:  Detailed explanation of JavaScript prototype chain

>>:  Example code of how to create a collapsed header effect using only CSS

Recommend

Vue virtual Dom to real Dom conversion

There is another tree structure Javascript object...

How to add links to FLASH in HTML and make it compatible with all major browsers

Look at the code first Copy code The code is as fo...

Detailed explanation of MySQL data rows and row overflow mechanism

1. What are the formats of lines? You can see you...

JavaScript uses canvas to draw coordinates and lines

This article shares the specific code of using ca...

Teach you how to use docker-maven-plugin to automate deployment

1. Introduction to docker-maven-plugin In our con...

HTML background color gradient effect achieved through CSS style

Effect screenshots: Implementation code: Copy code...

Detailed explanation of the error problem of case when statement

Preface In the MySQL database, sometimes we use j...

Application of HTML and CSS in Flash

Application of HTML and CSS in Flash: I accidental...

HTML Tutorial: Collection of commonly used HTML tags (6)

These introduced HTML tags do not necessarily ful...

Reasons and solutions for MySQL selecting the wrong index

In MySQL, you can specify multiple indexes for a ...