👀 author Xiao SAN is just graduated from the full stack engineer, wrote the technical article is basically in the process of learning notes sorted out, you can give little brother a little praise if you like after reading. 👀 exception little brother still has a programmer exchange group, welcome everybody big guy to touch fish ha. Click add group

As front-end beginners, is there a doubt that our computer screen is large, but the mobile phone screen is small, that I wrote in the PC page to the mobile phone end is not very ugly?

So! Here I will introduce to you the adaptation scheme of REM

About the adaptation of REM?

  • What is the purpose of adaptation?

  • How does it work

  • How to do?

With these three questions in mind, let’s take a look at REM

What is the purpose of adaptation?

Must be in order to adapt to different devices, we write out the effect is not very different, if we only according to the PC side to develop, if the user opens the page with a mobile phone, it must be very uncomfortable to use.

Moreover, if we are to adapt to a mobile phone, and then to write a style, it is not a greater workload, not to mention the market there are so many mobile phone categories, screen sizes vary, what bangs what, the workload can be imagined!

How does it work

Let’s take a look. How does REM work?

1. Dynamically calculate and set the HTML font size (font-size) according to the size ratio of the UI design draft to the device width; The page size then regulates the size of the elements according to a formula

2. According to the width and height of the elements of the design draft, the values are converted into REM units according to the same proportion

How to do?

First of all, we take iphone6 as an example, because we often use iphone6 as a mobile example to convert, why do you need to go to Baidu.

Less + @media(media query) + REM

Let’s assume that the UI gives us a design of 750px, then we divide the screen into 15 equal parts (depending on your needs, 15 to 20 equal parts are ok), and then each part is the size of the HTML text, and then 750 divided by 15 is 50px. So when we use a device with a width of 375px, To convert the font size to 375 divided by 15, you get 25px, then divide the size of the page elements by the different HTML font sizes, and you’ll see that the ratio is still the same.

So if you have a box that’s 100 by 100 pixels on a 750 screen, that’s 100 divided by 50 if you convert it to REM it’s 2REM by 2REM,

For example, if we want to draw a 100px box under a 375 screen, that’s 4REM by 4REM

Then let’s look at the code

<head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" < span style> @media screen and (min-width: 1em; width: 1em; 375px) { html { font-size: 25px; } } @media screen and (min-width: 750px) { html { font-size: 50px; } } .box1 { width: 2rem; height: 2rem; background-color: green; } .box2 { width: 4rem; height: 4rem; background-color: skyblue; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body>Copy the code

Let’s take a look at screen 750

Let’s look at the mobile end of 375

And then you can see

A 100 by 100 px element is 100/50 under 750 screens and the conversion to REM is 2rem2REM is 1 to 1

375 An HTML font size of 25 under the screen is 2rem=50px and the width and height are both 50 but the ratio is still 1 to 1

Finally, the formula is obtained:

Page width =A =>

HTML font size value =B

Number of partitions =C =>(known)

Rem is equal to X

X = A / B / C

B = A / C

@media +flexble.js + rem

Flexible. Js can easily solve various adaptive compatibility problems on different mobile devices.

And it’s incredibly easy to use, we just have to introduce this thing, and the principle is to divide the equipment equally and the proportions of the different devices are the same

Then you need to set the screen size, mine is like this

<head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, Initial-scale =1.0" /> <title>Document</title> <scri SRC ="./flexible/flexible. Js "></script> <style> @media screen and (min-width: 375px) { html { font-size: 25px; } } @media screen and (min-width: 750px) { html { font-size: 50px; } } div { width: 2rem; height: 2rem; background-color: rgb(247, 5, 5); } </style> </head> <body> <div></div> </body>Copy the code

The following is the JS file I went to the Internet to find, need to be able to download their own use

(function(win, lib) { var doc = win.document; var docEl = doc.documentElement; var metaEl = doc.querySelector('meta[name="viewport"]'); var flexibleEl = doc.querySelector('meta[name="flexible"]'); var dpr = 0; var scale = 0; var tid; var flexible = lib.flexible || (lib.flexible = {}); If (metaEl) {console.warn(' Scaling will be set based on existing meta tags '); var match = metaEl.getAttribute('content').match(/initial-scale=([\d.]+)/); if (match) { scale = parseFloat(match[1]); dpr = parseInt(1 / scale); } } else if (flexibleEl) { var content = flexibleEl.getAttribute('content'); if (content) { var initialDpr = content.match(/initial-dpr=([\d.]+)/); var maximumDpr = content.match(/maximum-dpr=([\d.]+)/); if (initialDpr) { dpr = parseFloat(initialDpr[1]); scale = parseFloat((1 / dpr).toFixed(2)); } if (maximumDpr) { dpr = parseFloat(maximumDpr[1]); scale = parseFloat((1 / dpr).toFixed(2)); } } } if (! dpr && ! scale) { var isAndroid = win.navigator.appVersion.match(/android/gi); var isIPhone = win.navigator.appVersion.match(/iphone/gi); var devicePixelRatio = win.devicePixelRatio; If (isIPhone) {// In iOS, for 2 and 3 screens, use 2x solution, and for the rest, use 1x solution if (devicePixelRatio >= 3 && (! dpr || dpr >= 3)) { dpr = 3; } else if (devicePixelRatio >= 2 && (! dpr || dpr >= 2)) { dpr = 2; } else { dpr = 1; }} else {// For other devices, use the same scheme DPR = 1; } scale = 1 / dpr; } docEl.setAttribute('data-dpr', dpr); if (! metaEl) { metaEl = doc.createElement('meta'); metaEl.setAttribute('name', 'viewport'); metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no'); if (docEl.firstElementChild) { docEl.firstElementChild.appendChild(metaEl); } else { var wrap = doc.createElement('div'); wrap.appendChild(metaEl); doc.write(wrap.innerHTML); } } function refreshRem() { var width = docEl.getBoundingClientRect().width; if (width / dpr > 540) { width = 540 * dpr; } var rem = width / 10; docEl.style.fontSize = rem + 'px'; flexible.rem = win.rem = rem; } win.addEventListener('resize', function() { clearTimeout(tid); tid = setTimeout(refreshRem, 300); }, false); win.addEventListener('pageshow', function(e) { if (e.persisted) { clearTimeout(tid); tid = setTimeout(refreshRem, 300); } }, false); if (doc.readyState === 'complete') { doc.body.style.fontSize = 12 * dpr + 'px'; } else { doc.addEventListener('DOMContentLoaded', function(e) { doc.body.style.fontSize = 12 * dpr + 'px'; }, false); } refreshRem(); flexible.dpr = win.dpr = dpr; flexible.refreshRem = refreshRem; flexible.rem2px = function(d) { var val = parseFloat(d) * this.rem; if (typeof d === 'string' && d.match(/rem$/)) { val += 'px'; } return val; } flexible.px2rem = function(d) { var val = parseFloat(d) / this.rem; if (typeof d === 'string' && d.match(/px$/)) { val += 'rem'; } return val; } })(window, window['lib'] || (window['lib'] = {}));Copy the code