In the front-end development, the development of mobile terminal can be said to be very important, but it is facing the awkward point of different device sizes and resolutions. Today [September 16, 2018] Typhoon Mangkhut landed in Guangdong, coming in a menacing way, it is impossible to go out, then stay home to write this small article… Talk about rem units

A very long prelude

When you think about response layout on mobile, you might think:

1. Use the CSS3 media query method

body {
	background: yellow;
}
@media screen and (max-width: 400px) {
	body {
		background: red; }}Copy the code

Well, this style is a lot of work because you have to set up resources like images and text for different sizes. A cool feeling floating from the bottom of my heart ~ ~ ~

2. Use percentages directly

This method is more suitable for mobile terminal, page images spread across the width of the screen operation promotion event. There will be a 750px width and other design specifications, which can be adapted to different phones. Then the job is to cut the picture…

#percent{
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
#percent .item{
	flex: 1;
}
#percent .item img{
	display: block;
	width: 100%;
	height: auto;
}
Copy the code

If you look closely at the GIF above, you’ll see three images of the same width and height. The chrome debugger shows a white bar, but it doesn’t matter. Because it doesn’t exist on a real machine. If the width of the graph is not equally divided, then this percentage method is not recommended.

3. Fixed width

This method is more suitable for PC side development, in the mobile side is a must not go. The mobile side is wide enough to provide a good experience, and the most important thing is that it has a pixel ratio of 1. There is no distortion of the content when zooming. If to the mobile end above, that ha ha ~

#container{
	width: 680px;
	background: yellow;
	margin: 0 auto;
}
h1{
	text-align: center;
}
Copy the code

4. Use the viewport

A viewport on a mobile device is the part of the screen used to display a web page, and more specifically, the part of the browser used to display a web page. But a viewport is not limited to the size of the browser’s viewport. It can be larger or smaller than the browser’s viewport.

This requires setting the meta on the page’s head tag, such as:

<meta name="viewport" content="Width = device - width, initial - scale = 1.0, the maximum - scale = 1.0, user - scalable = 0">
Copy the code

Well, this is a bit of a puzzle, see the rookie tutorial: Responsive Web Design – Viewport. This post is not about that

Yes, we can use REM for adaptation: arguably the most powerful mobile adaptation yet…

What is rem

Rem, like EM units, is a relative unit. The difference is that EM is calculated relative to the font size of the parent element, while REM is calculated relative to the font size of the root element HTML. In this way, REM perfectly avoids the complex hierarchical relationship and achieves functions similar to EM units. By default, the font size given by the browser is 16px (16px = 1rem).

The root element is fixed by default at 16px, how to device different mobile devices?

We can dynamically change the default font size of the root HTML element. See below:

Rem adaptive processing scheme

When using rem layouts, we should adjust the root font size dynamically to accommodate different resolutions, so that all rem child elements are scaled together to achieve adaptive effects.

Change the size of the root font dynamically, using javascript to control the size.

One is to obtain pixel ratio [pixel ratio = physical pixel/logical pixel] through devicePixelRatio, its compatibility in IE to 11 and 11+, good compatibility. Stop talking about Internet Explorer and watch with caution.

(function(){
	var devicePixelRatio = window.devicePixelRatio || 1; }) ();Copy the code

Well, on the mobile end of the match, REM and viewport match better oh! The complete code snippet is as follows:

<head>
	<meta name="viewport" />
</head>
Copy the code
(function(){
	var fontSizeMatchDeviceWidth = function(){
		var deviceWidth = document.documentElement.clientWidth || window.screen.width || 320,
			devicePixelRatio = window.devicePixelRatio || 1,
			fontSize = (Math.ceil(deviceWidth * 16 / 320)),
			scale = 1 / devicePixelRatio; // Default zoom
			
		document.documentElement.style.fontSize = fontSize + 'px';
		document.querySelector('meta[name="viewport"]').setAttribute('content'.'width=device-width,initial-scale='+'scale'+',maximum-scale='+scale+',minimum-scale='+scale+',user-scalable=no,viewport-fit=cover'); // Add viewport-fit=cover for iPhone X
	};
	
	(function(){
		var ua = navigator.userAgent;
		if(/android/i.test(ua) || /ipad|itouch|iphone/i.test(ua)|| /tianqi/i.test(ua)){
			fontSizeMatchDeviceWidth();
		} else { // Gracefully degraded on PC
			document.documentElement.style.fontSize = '24px'; }}) (); }) ();Copy the code

On the basis of the above, add a bit of style, a complete demo to go:

#container{
	background: yellow;
	margin: 0 auto;
}
h1{
	text-align: center;
}
Copy the code

If there is a mistake, welcome to see the little brother little sister correct @ ~ @! For more, head over to my Github