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
Preface innodb_data_file_path is used to specify ...
Table of contents Preface JavaScript find() Metho...
Table of contents 1. What is a regular expression...
1. Tools We need two tools now: MySQL server (mys...
This example requires downloading and installing ...
First, the structure inside the nginx container: ...
Let me first explain why the text is not vertical...
The environment of this article is Windows 10, an...
This article example shares the specific code of ...
Preface In current JavaScript, there is no concep...
In the process of making web pages, it is inevita...
1. First look at the request configuration file, ...
Install mysql5.7.18 on CentOS6.7 1. Unzip to the ...
1. Create a Docker network docker network create ...
Physically speaking, an InnoDB table consists of ...