Background:
In some cases, apps that use server-side rendering need to take some of the client’s parameters during the first screen rendering, such as the window.innerWidth value, and then calculate the font-fize value of the root element with the width of the design. This works with Px2REM, so we don’t need to manually calculate the REM value. So that the server first screen rendering can adapt to the window size. For me, I didn’t have to deal with client-rendered single-page spAs like React and Vue where I could get the window.innerWidth value before the page was mounted. A major shortcoming of server-side rendering is that projects that use server-side rendering now take the first screen rendering task to the server and get the window. InnerWidth from the client to adapt to the first screen.
Cause analysis:
Server rendering route:
Server side rendering means that the client directly renders the HTML assembled on the server side, and then downloads JS and CSS to supplement the rest of the page. Therefore, the server side rendering needs to pay attention to the point that the window object cannot be accessed randomly in the code, because the Window object cannot be accessed on the server side. The window object cannot be accessed until the page is mounted, but when we wait for useEffect to calculate the root font size of the window, the HTML page has already been rendered once (according to the default root font size). As a result, the page elements zoom out (or zoom out, depending on the default font size value you set)
Solution:
In the header of the HTML page returned by the server to the client, the JS code is executed to calculate the root font size according to the window size, and then pX2REM is configured to automatically convert the core code according to the calculated root font size
// calcHtmlFontSize.js
/** * Calculates the root fontsize * based on the window@param {*} doc documnet
* @param {*} win window
* @param {*} DesignWidth Screen width, default: 750 */
const calcHtmlFontSize = function (doc, win, designWidth = 750) {
const docEl = doc.documentElement;
const resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
const recalc = function () {
// True screen width
const width = win.innerWidth;
// In the case of 750px width design, 1rem = 100px;
if (width <= 750) {
docEl.style.fontSize = `The ${100 * (width / designWidth)}px`;
} else {
docEl.style.fontSize = '100px'; }};if(! doc.addEventListener)return;
// Depending on whether there is a need to change the resolution dynamically
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
recalc();
};
calcHtmlFontSize(document.window);
Copy the codeThe calchtmlFontsie.js file is then introduced in the header of the index.html template file
<Head>
<title>{title}</title>
<meta charSet="utf-8" />
<link rel="shortcut icon" type="image/x-icon" href="/spider.ico" />
<script src="/calcFontsize.js" />Copy the code