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
name character name character information news te...
Achieve results Code html <div class="css...
add -it docker run -it -name test -d nginx:latest...
This article example shares the specific code of ...
Pre-installation work: Make sure vmware workstati...
Copy code The code is as follows: <style> ....
Today when I was writing a flash advertising code,...
Table of contents How to represent the current ti...
After Vmvare sets the disk size of the virtual ma...
Borrowing Constructors The basic idea of this t...
This article shares the specific code of fabricjs...
I remember a question the interviewer asked durin...
Table of contents 1. Introduction to SQL Injectio...
In my last post I talked about how to make a web p...
Use HTML color blocks to dynamically display data...