For beginners a front-end, the first thing to do is cut the page, the page has to be said is the layout, the layout of the importance is self-evident, for the sake of a good user experience, put forward a lot of different layout: responsive layout, flexible layout, flow distribution, etc., also flows out of the many framework. Recently, I have been reading about the responsive layout of mobile terminal, which involves more is the setting of size attributes: PX, VW, VH, %, em, REM and so on. Today, I will give a summary of rem usage.
Said in the previous
When we think of writing a mobile page, we should consider that the page we write can adapt to various mobile devices. At first, it feels very difficult to do this. At first, I thought that it would be convenient to use a third-party framework written by others. However, what if it can’t be used ah, so still have to learn to write their own native page layout, and there will be this article today. Let’s take a look at the pages I wrote in normal percentages and pixels versus the pages I wrote in REM:
A comparison between a normal 100% layout and a REM layout
- Small resolution (375*667)
- Small resolution (414*736)
- Big resolution
A simple comparison shows the effect. When not using someone else’s frame, how to write. The easiest thing to think of is to write it in percentage, which is useful for the width of the device. The width is fixed, but it has no effect on the height. Most people use percentage to set the width and px to set the height, but this is not a good experience. Once you switch to a device with a higher resolution, the effect is much worse, and most of the label elements will be stretched. The height is fixed, changed to a large resolution, the effect of various elements is still the original, various elements fixed size, the experience is not very good.
The use of rem
Rem is the unit of font size relative to the root element. It is simply a relative unit, adapted by the root element.
- Normal use
For example, if the HTML font size is 20px, say 20px is 1rem, and then all subsequent elements are scaled based on this ratio. There are problems with this algorithm. When we calculate the width of a page, rem value is calculated by using the resolution of a certain mobile device. In the following example, I use the resolution of iphone6, 375*667, and its width is 375px and 20px is 1rem, so 375px is 18.75rem. Look at the following code:
<! DOCTYPE html> <html> <head> <meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> <! --<scripttype="text/javascript" src="js/rem.js" ></script>-->
<title></title>
<style>
html{
font-size:20px;
}
*{
border: 0;
padding: 0;
margin: 0;
}
#box1{Width: 18.75 rem; Height: 7.5 rem;float: left;
background-color: red;
}
#box2{Width: 18.75 rem; Height: 7.5 rem;float: left;
background-color: #00FFFF;The font - size: 0.6 rem; }#box3{Width: 18.75 rem; height: 17rem;float: left;
background-color: #B22222;
}
#box4{Width: 18.75 rem; height: 20rem;float: left;
background-color: #BFBFBF;
}
#box5{Width: 18.75 rem; height: 22rem;float: left;
background-color: cadetblue;
}
#input1{
width: 80%;
height: 2rem;
float: left; border-radius: 2rem; Margin - left: 1.5 rem; Margin - top: 0.6 rem; } </style> </head> <body> <div id="box1">
<input type="text" id="input1" />
</div>
<div id="box2"> <div id= <div id= <div id= <div id="box3"</div> <div id="box4"<div style = "box-sizing: border-box; word-wrap: break-word! Important;"box5"</div> </body> </ HTML >Copy the codeThe code above is just about full width at 375*667 resolution, but the problem arises when you switch to a different resolution (like 414*736).
The reason for this problem is simple, this method does not work even with REM, the width and height are fixed, width is 18.75rem is 375px, switch to another resolution (such as 414*736), its width is 375px, and the margins are still visible. A lot of people think that you can solve the problem by setting the width as a percentage, or by using @media as a media query, or by using deviceWidth () in viewPort Settings. Of course, all of these methods solve the width problem, but what about height? See the following:
<! DOCTYPE html> <html> <head> <meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<script type="text/javascript" src="Js/jquery - 3.1.1. Min. Js." " ></script>
<script type="text/javascript" src="Js/jquery - 1.8.3. Min. Js." "></script> <! --<scripttype="text/javascript" src="js/rem.js" ></script>-->
<title></title>
<style>
html{
font-size:20px;
}
*{
border: 0;
padding: 0;
margin: 0;
}
#box1{width: 100%; Height: 7.5 rem;float: left;
background-color: red;
}
#box2{width: 100%; Height: 7.5 rem;float: left;
background-color: #00FFFF;The font - size: 0.6 rem; }#box3{
width: 100%;
height: 17rem;
float: left;
background-color: #B22222;
}
#box4{
width: 100%;
height: 20rem;
float: left;
background-color: #BFBFBF;
}
#box5{
width: 100%;
height: 22rem;
float: left;
background-color: cadetblue;
}
#input1{
width: 80%;
height: 2rem;
float: left; border-radius: 2rem; Margin - left: 1.5 rem; Margin - top: 0.6 rem; } </style> </head> <body> <div id="box1">
<input type="text" id="input1" />
</div>
<div id="box2"> <div id= <div id= <div id= <div id="box3"</div> <div id="box4"<div style = "box-sizing: border-box; word-wrap: break-word! Important;"box5"</div> </body> </ HTML >Copy the codeSee the effect:
As you can see from the image, the width can be used for different mobile devices, but the height remains the same, always 150px. The page doesn’t look very good, the resolution is larger, the page is stretched and the height becomes smaller.
- The correct use of
Dynamic calculation of HTML font size, the core is to switch different mobile devices through JS device width, and then calculate the HTML font size value according to the scale, dynamic change.
var d = document.documentElement; / / var the cw = get HTML elements, dc lientWidth | | 750; d.style.fontSize = (20 * (cw / 375)) > 40 ? 40 +'px' : (20 * (cw / 375)) + 'px';
Copy the codeAbove code explanation:
- The horizontal resolution of the design draft is 375 (iphone6), and the planned 20px is 1rem;
- For layout, the CSS size of each element = 20 x (device width/vertical resolution).
Complete code:
window.addEventListener(('orientationchange' in window ? 'orientationchange' : 'resize'),
(function() {// Check whether the screen is rotated or resizedfunction c() { var d = document.documentElement; / / var the cw = get HTML elements, dc lientWidth | | 750; d.style.fontSize = (20 * (cw / 375)) > 40 ? 40 +'px' : (20 * (cw / 375)) + 'px';
}
c();
returnc; }) (),false);
Copy the codeThe above approach allows you to dynamically set the width and height of various tag elements and adjust them proportionally for different mobile devices. Such as: Switch to iphone6 plus and the height of box1 =(414/375)7.5=8.28rem (8.2820=165.6px). The height of the iphone6 is not the same, writing pages will be more beautiful. See the effect:
You can see from the effect shown above, and the calculated result is the same, the method is correct. You can use it later. Take a look at the overall effect:
Page elements are not stretched at all, but scaled to a certain scale to keep the page beautiful.
The source code
Finally, please attach the blog address, Github address, if you think it is ok, welcome star, and welcome to communicate with us