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

Some notes on modifying the innodb_data_file_path parameter of MySQL

Preface innodb_data_file_path is used to specify ...

Summary of the Differences between find() and filter() Methods in JavaScript

Table of contents Preface JavaScript find() Metho...

Learn more about using regular expressions in JavaScript

Table of contents 1. What is a regular expression...

Detailed steps to install mysql5.7.18 on Mac

1. Tools We need two tools now: MySQL server (mys...

Detailed steps for installing and debugging MySQL database on CentOS7 [Example]

This example requires downloading and installing ...

Detailed explanation of docker nginx container startup and mounting to local

First, the structure inside the nginx container: ...

Vue realizes the logistics timeline effect

This article example shares the specific code of ...

How to simulate enumeration with JS

Preface In current JavaScript, there is no concep...

Use h1, h2, and h3 tags appropriately

In the process of making web pages, it is inevita...

Vue-Element-Admin integrates its own interface to realize login jump

1. First look at the request configuration file, ...

Example of how to install kong gateway in docker

1. Create a Docker network docker network create ...

Detailed explanation of InnoDB storage files in MySQL

Physically speaking, an InnoDB table consists of ...