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

Gradient slide effect implemented by CSS3

Achieve results Code html <div class="css...

After docker run, the status is always Exited

add -it docker run -it -name test -d nginx:latest...

Vue method to verify whether the username is available

This article example shares the specific code of ...

Detailed steps to install CentOS7 system on VMWare virtual machine

Pre-installation work: Make sure vmware workstati...

How to prevent Flash from covering HTML div elements

Today when I was writing a flash advertising code,...

How to expand the disk size of a virtual machine

After Vmvare sets the disk size of the virtual ma...

Five ways to implement inheritance in js

Borrowing Constructors The basic idea of ​​this t...

Fabric.js implements DIY postcard function

This article shares the specific code of fabricjs...

What are HTML inline elements and block-level elements and their differences

I remember a question the interviewer asked durin...

Preventing SQL injection in web projects

Table of contents 1. Introduction to SQL Injectio...

Getting Started Tutorial for Beginners⑧: Easily Create an Article Site

In my last post I talked about how to make a web p...

Html to achieve dynamic display of color blocks report effect (example code)

Use HTML color blocks to dynamically display data...