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
There is another tree structure Javascript object...
Look at the code first Copy code The code is as fo...
1. What are the formats of lines? You can see you...
This article shares the specific code of using ca...
1. Introduction to docker-maven-plugin In our con...
In MySQL, you can use IF(), IFNULL(), NULLIF(), a...
Problem Description When using Windows Server 201...
Effect screenshots: Implementation code: Copy code...
Preface In the MySQL database, sometimes we use j...
This article explains the difference between arro...
Application of HTML and CSS in Flash: I accidental...
These introduced HTML tags do not necessarily ful...
one. Overview of IE8 Compatibility View <br /&...
In MySQL, you can specify multiple indexes for a ...
Basic Concepts Current read and snapshot read In ...