Mobile REM Layout Learning (based on the thinking of a netease Cloud playback page)

For a front-end beginner, the first thing to do is to cut the page, cut the page has to say is the layout, the importance of layout is self-evident, in order to good user experience, put forward a lot of different layouts: responsive layout, flexible layout, flow layout and so on, also flowed out a lot of framework. Recently looking at the mobile side of the responsive layout, which involves more than the size of the property settings: PX, VW, VH,%, EM, REM, and so on, today he smoothed the use of REM.

Say in front

The thought of writing mobile page, it is necessary to consider their own page can adapt to a variety of mobile devices, at first want to feel good difficult ah, the first thought is to use a third-party framework, with other people write things should be very convenient. However, in case you can not use what to do, so still have to learn to write their own native page layout, there will be today's this article. Let's look at the comparison of the pages that you write in normal percentages, pixels, and later use REM:

Comparison of common hundred-percent layout with REM layout

1. Small resolution (375*667)
   
2. Small resolution (414*736)
   
3. Large resolution
   

The effect is seen in a simple contrast. How to write when no one else's frame is used. The most easy to think of is to write with a percentage, this writing on the width of the device useful, the width is fixed, on the height does not play any role, most people's practice is to set the width with a score, the height of the PX to set, but this practice is not very good, with a small resolution device feeling is not very bad, Once replaced with a larger resolution of the device effect is much worse, most of the label elements will be stretched. Highly fixed, changed to a large resolution of various elements effect or original, various elements fixed size, experience is not very good.

Use of REM

REM refers to the unit of font size relative to the root element. Simply put, it is a relative unit that is adapted by the root element.

• Normal use

Most of it is by setting the font size of the HTML to control the size of REM, for example: HTML font size is 20px, then say 20px is 1rem, the next element of all the size is based on this scale to be converted. This algorithm is problematic, when we calculate the width of the page rem is worth using the resolution of a mobile device to calculate, the following example I use IPHONE6 resolution 375*667, its width is 375px,20px to 1rem, Then 375px is 18.75rem. Look at the following code:

<! DOCTYPE html>

The above code is exactly full width at the resolution of 375*667, and when you switch to other resolutions (such as 414*736), the problem comes, looking at the graph:

The reason for this problem is very simple, this writing is using REM also does not work, width and height are fixed, widths of 18.75rem is 375px, switch to other resolutions (such as 414*736), its width or 375px, the gap is still displayed, Many people will think that the width can be set to a percentage of the form, or the media query @media, or viewport settings in the way of the Devicewidth () to solve the problem, of course, these methods can solve the problem of width, but the height of the problem? See below:

<! DOCTYPE html>

Look at the effect:

Look at the picture to know, the width can adapt to different mobile devices, but the height has not changed, has been 150px, the page effect is not good-looking, the resolution is large, the page is stretched, the height appears to be smaller.

• Correct use

Dynamic computation of HTML font-size, the core is to switch different mobile devices through JS to obtain device width, and then proportionally calculate the value of HTML font-size, dynamic change.

var d = document.documentElement;//获取html元素var cw = d.clientWidth || 750;d.style.fontSize = (20 * (cw / 375)) > 40 ? 40 + ‘px‘ : (20 * (cw / 375)) + ‘px‘;

The above code explains:

1. The design manuscript horizontal resolution is 375 (IPHONE6), the plan 20px is 1rem;
2. Layout, the CSS size of each element = 20 * (Device width/design draft vertical resolution).

Full code:

window.addEventListener((‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘),                         (function() {//判断是屏幕旋转还是resize    function c() {        var d = document.documentElement;//获取html元素        var cw = d.clientWidth || 750;        d.style.fontSize = (20 * (cw / 375)) > 40 ? 40 + ‘px‘ : (20 * (cw / 375)) + ‘px‘;    }    c();    return c;})(), false);

The above practice can be dynamically set the width and height of various label elements, proportional debugging to adapt to different mobile devices. For example: The above code is designed in Iphone6, box1 height is 7.5rem (150px), if switching to iphone6 plus size, box1 height= (414/375) 7.5=8.28rem, That is, 8.2820=165.6px, and iphone6 when the height is not the same, write the page will be more beautiful. Look at the effect:

Look at the effect shown above can be seen, and the calculated results are the same, the method is correct. You can use it later. Look at the overall effect:

Page elements are not stretched at all, scaled to a certain scale to keep the page visually appealing.

Mobile REM Layout Learning (based on the thinking of a netease Cloud playback page)