Write about the principle of the analysis of the article a lot, each time read the understanding, behind and forget, this time to sort out their own, with popular image words comb.
Flexibility.js is used to deal with the compatibility problems of various mobile devices. Is how to solve the problem of many mobile terminal size, our design draft is fixed, how to do, if the design draft is fine can zoom at the elastic, think about it, is there a way to, just like you would on a large piece of paper for a picture, let you in a small paper in paint a secondary how small paintings of proportion is everything, And the same thing happens if you want to draw it on a bigger piece of paper, so let’s just draw it bigger, right?
Now we divide the design into 10 equal parts, A = W/10, we divide the device viewable area, the canvas of our various mobile devices, into 10 parts, and assign the fontSize of the root element. We all know that rem is calculated according to the fontSize of the root element. So we have 1rem, which is the viewable area of the device divided by 10, and now we have A width B on the design, so is it equal to B/A rem in the viewable area of the device. Again, if B is B/A in the design, it’s B/A in the visual area of the device, right? So the width is B/A REM. This is how flexibility.js enables device compatibility. So let’s look at the code
// The first is an immediate function, The arguments passed in are window and document (Function Flexible (window, Document) {var docEl = document. The documentElement / / returns the document root element var DPR = window. DevicePixelRatio | | 1 / / equipment for DPR, // Adjust Body font size Set the default font size, The default font size of inherited from the body function setBodyFontSize () {if (document. Body) {document. Body. Style. FontSize = 12 * (DPR) + 'px'} else { document.addEventListener('DOMContentLoaded', setBodyFontSize) } } setBodyFontSize(); // set 1rem = viewWidth / 10 function setRemUnit () { var rem = docEl.clientWidth / 10 docEl.style.fontSize = rem + 'px' } setRemUnit() // reset rem unit on page resize window.addEventListener('resize', setRemUnit) window.addEventListener('pageshow', Function (e) {if (e.persisted) {setRemUnit()}}) // detect 0.5px supports supports 0.5px. if (dpr >= 2) { var fakeBody = document.createElement('body') var testElement = document.createElement('div') testElement.style.border = '.5px solid transparent' fakeBody.appendChild(testElement) docEl.appendChild(fakeBody) if (testElement.offsetHeight === 1) { docEl.classList.add('hairlines') } docEl.removeChild(fakeBody) } }(window, document))Copy the code