I recently saw this question: I have a 750 x 1500 design draft with a 150 x 50 button on it. How should I determine the size of the button when writing a page layout? . Most of the students mentioned REM in their answers. This made me curious about the rem unit. Okay, not very well at the moment.

So the question is, what exactly is REM? What problem does REM exist to solve? What convenience can REM bring us? With this problem in mind, I went to learn a lot of REM articles, and then happened to have a mobile page requirement in my work, so I tried to use REM to complete a small page adaptation. You can click here to see the REM adaptation demo,

It is recommended that you open it in The Device Module of Chrome and switch between emulators of different phones to see the difference between different sizes.

What is REM?

Rem is a CSS unit relative to the font size of the root element. Like PX, it can be used to set font sizes, as well as length units. What does the font size mean relative to the root element?

Here’s an example. In a page, the HTML element is the root element, so we first set a font size for the HTML

html { font-size: 100px; }Copy the code

Thus, throughout the page, there is the conversion formula: 1rem = 100px

So if a button has the following CSS style, it is equivalent to 100px wide and 50px high.

btn { width: 1rem; Height: 0.5 rem; }Copy the code

That seems to be the whole truth about REM. !!!!!!!!! What? That’s it? What’s the difference between this and PX? Px is a unit of measurement. So the student who asked the question took the 750×1500 design drawing and asked, what size should the button of 150×50 be written in the page? 75×25 should be written in PX, and 0.75x 0.25 should be written in REM.

But apparently, REM has a little something else.

What problem does REM exist to solve?

The iPhone4 and 5 are 320px wide, the iPhone6 375px wide and the iPhone6 Plus 414px wide. If a button has a fixed size of 75×25, it will inevitably have different relative sizes for different sizes. The problem that this brings is that it will directly affect the beauty of the design. Maybe under iPhone6, a perfect design picture will become a lot low when it comes to iPhone5. Rem is created to allow the size of page elements to change as the width of the device changes.

We already know that the relative size of REM is related to the font size of HTML elements. The principle behind using REM adaptation is that we only need to adjust the font size of the HTML when the device width changes, and all elements on the page using REM units will change accordingly. This is the biggest difference between REM and PX.

There are two ways to adjust the size of HTML elements: CSS and JS.

CSS way

Font: calc(100vw / 3.75)}Copy the code

100vw represents the width of the device, divided by 3.75. In this case, 375px is the width of the iphone6. To ensure that the font size of the HTML is 100px. So when we convert, 1px is 0.01rem, which is easy to calculate.

Since chrome has a minimum font size of 12px, we can’t set HTML font size to 1px or 10px. 100px is our best choice.

Js mode, the principle is the same as CSS, but in order to avoid some older mobile browsers do not support calc, VM these attributes, in practical applications using JS is the best.

Document. The documentElement. Style. FontSize = $(document. DocumentElement.) width () / 3.75 + 'px'; $(window).on('resize', The function () {document. The documentElement. Style. FontSize = $(document. DocumentElement.) width () / 3.75 + 'px'; })Copy the code

##### What to note

First, REM’s applicability is limited and can only be used for mobile-only pages. If your page needs to be adapted to PC, use PX.

Second, you can set the maximum width and minimum width of HTML because you only use the page for mobile, but others open it on PC. 580px is the maximum width of the browser on your phone.

html {
   max-width: 580px;
   min-height: 320px;
}Copy the code

Third, some students may be a little misunderstanding of the adaptation of the Web. Adaptation on the Web doesn’t have to be about physical pixels, DPI, etc. These should only be considered for Android or ios native apps. These misunderstandings caused many design students to throw in a 1080 x 1920 design draft when designing web app, which was really sad.

So back to the question, what do you do with a 750×1500 design? This is actually good, 750 is exactly twice the width of 375, the width of the iPhone6. So we can just divide this by 2. What if it’s 1080×1920 or something really, really big? 2. Create a new PSD 375px wide and 1000px high (you can go higher, whatever) 3. Drop in the saved design. JPG. The size of the page element is what you need.

Ps: The best way to do this is with Sketch.