HD adaptation for mobile terminals

Why do we need to adapt?——More and more screen sizes

How to adapt?

Understand a few concepts:
Retina screen: It can compress more pixels into a screen, thereby achieving a higher resolution and improving the fineness of the screen display.
dpr: = physical pixel / device independent pixel [in a certain direction, x direction or y direction]
Under normal screen: 1 css pixel corresponds to 1 physical pixel (1:1).
Retina screen: 1 css pixel corresponds to 4 physical pixels (1:4)

Example: iPhone4 and subsequent products
dpr=2: 4, 4s, 5, 5s, 6, 6s
dpr=3: 6+ and 6s+

Major premise for adaptation:

1. Text adaptation problem:
px: relative length unit relative to the monitor screen resolution
em: inherit from parent 20px -10px -5px
rem: relative html value

determine the root node font The px value of -size can determine the rem value of the target node

1. js control

!(function (doc, win) {
		var docEl = doc.documentElement,
			resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
		recalc = function () {
			var clientWidth = docEl.clientWidth;
			if (!clientWidth) return;
			docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
		};
		if (!doc.addEventListener) return;
		win.addEventListener(resizeEvt, recalc, false);
		doc.addEventListener('DOMContentLoaded', recalc, false);
	})(document, window);

2. Media inquiry @media

@media screen and (min-width: 320px) {html { font-size: 100px;}}
 
@media screen and (min-width: 360px) {html {  font-size: 112.5px；}}
 
@media screen and (min-width: 400px) {html {font-size: 125px;}}
 
@media screen and (min-width: 440px) {html {font-size: 137.5px;}}
 
@media screen and (min-width: 480px) {html {font-size: 150px;}}

3. Determine DPR Taobao’s flexible adaptation solution

4. Powerful unit - vw Use the unit vw to achieve dynamic calculation

Image HD problem:
Twice the image (@2x), and then the image container is reduced by 50%.
For example: image size, 400×600;
1.img tag: width: 200px; height: 300px;
2. Background image: width: 200px; height: 300px; background-image: url(image@2x.jpg) ; background-size: 200px 300px;

Such shortcomings are obvious, under normal screen:
1) @2x pictures are also downloaded, resulting in a waste of resources.
2) The picture will lose some sharpness (or chromatic aberration) due to downsampling. So the best solution is: load images of different sizes under different dprs. Get the parameters through the url, and then you can control the image quality or crop the image into different sizes.

Summary:
1. Base size iPhone 6, when adapting upward and downward, the interface adjustment is minimal
2. Adaptation rules: text flow, control elasticity, image scaling