table of Contents
Moving end of the basic ideas developed
Pixel Basics
viewport principle of analytic
Elastic layout
Responsive design
The use 1rem
Mobile end of the event
Use zepto library
Moving end of the basic ideas developed
Meaning mobile-side development of
mobile end user usage -> Market demand -> market supply -> Companies need to move the end of the development of human resources -> high wages, employment and easy -> emergence of big-wave program ape -> to one of these years, wages will come down - > new technologies emerge, VR / AI -> rising market demand -> wave of re-take the old road ......
Pulling away, it is the motivation to learn more roughly mobile terminal development;
Understanding of mobile-side development of
mobile phone end-side development is to develop it?
No, No, No ...
the mobile side is a big category, lamb should be considered, including smart phones, tablet devices, including mobile, mainly both;
Getting mobile terminal development learning path
directory is
Pixel Basics
Before throwing three concepts px(CSS pixels): the virtual pixel, can be understood as "intuition" pixel, I want this element height 10px width; dp(device pixels): device pixels (physical pixels), can be understood as the actual pixels, the width and height of the element 10px in equipment with the actual number of physical pixels represented; dpr(device pixels ratio): ratio of device pixels, of the formula 1px = (dpr)^2 * 1dp, as will be appreciated by a number of devices 1px pixels;
3 is to understand the concept of integration:
width and height I set as an element is 10px, then the actual device used in the display device pixel number of true representation of it? dpr=2, Then 1px displayed by the four device pixels, if it is 10px, then the display device actually goes to show 10px with 40 dp; dpr=1, then 1px displayed by a device pixels;
the difference between px and dp is the intuition that only 10px and real use 40dp;
Why is there dpr> = 2 case? dpr = 1 is not more consistent with my knowledge and understand it?
It is not caused by the pursuit of a higher resolution, the higher the resolution the clearer the image! ! ! ;
But Mac's Retina screen and general PC at the same size, but a lot of image clarity, kidney?
dpr>=2Due ah! ! !
Other brands loom honestly 1px = 1dp, Mac is 1px = 4 dp, so you think intuitively we all use the same number of pixels represents the image (which is true drops), behind the actual Mac spent more than 1 times ( It refers DPR) device displays an image pixel;
Practical applications, the display device does not directly give you px and dpr
You actually see are the following parameters, the following information is kidney 6Plus of display parameters:
Then throw several concepts, do not faint slightly ...
Inches: This refers to the main diagonal screen size of 1 inch = 2.54cm, 5.5 inches approximately equal to 14cm (13.97cm)
Resolution: 1920 x 1080 pixels, the pixels herein refers to a physical (device pixels)
ppi (pixels per inch): pixels per inch, kidney 6Plus here as there are 401 pixels per inch
So how to calculate the ppi is out of it?
As the name suggests, the pixel (device pixels) per inch, screen resolution and the known dimensions of the main diagonal, then equal ppi
var 斜边尺寸 = V(1920^2+1080^2) V代表开根号
var ppi = 斜边尺寸/5.5
ppi = 401ppiNow we know, ppi higher, more pixels per inch, the sharper the image;
And prior knowledge What is the relationship?
After all, these parameters are foreigners first invention, they will give priority to choose their own familiar as a factory standard unit of measurement parameter display device, so it is used as a display ppi industry-standard equipment;
Tell the industry, ppi achieve the number of high-definition screen, this time corresponding dpr is how much, I'm not directly tell you how much of a display device dpr
After all, people heard directly pixel resolution will be more responsive
The following are different corresponding ppi dpi:
| ldpi | mdpi | hdpi | xhdpi | |
|---|---|---|---|---|
| ppi | 120 | 160 | 240 | 320 |
| Default zoom ratio | 0.75 | 1.0 | 1.5 | 2.0 |
[Note] Retina screen are dpr> = 2 high-definition screen
Kidney 6Plus of dpr 3, ultra high-definition screen;
So far, we have learned:
to give you a display device, a device with a resolution of 1920 * 1080, the size of 5.5 inches, can calculate its ppi = 401, according to ppi that its dpr = 3,
whereby the device can 1px = (3 ^ 2) dp, its virtual pixels 1920/3 = 660px, 1080/3 = 360px, i.e. virtual resolution of 360 * 660;
at this time, if you set the code element width * height 360 to 660 then, you will find its actual size is equal to the screen size of kidney 6Plus;
[ppi]
viewport principle of analytic
A very interesting phenomenon is that when you put the above code uses the device emulation mode in chrome, simulation kidney 6Plus, magical things happen, width and height of the element set obviously is the phone's width and height, common sense should occupy the entire screen, but it is real:
How did this thing? How to solve this problem?
Well, as a pragmatist you (not me yo), talk about the solution:
There meta tags with a viewport attribute may be set width for the attribute;
renal 6Plus default width is 980px, so the element width is 360px, the size of the actual display is 360px * 360/980 = 132.24px (not believe can own test yo );
Now as long as the viewport's width is set to 360px, then the element can fill the full screen;
Now we must introduce another concept: viewport
viewport The principle is:
First page rendering in a width is displayed on the default viewport size of equipment, such as renal 6Plus is 980px;
Then viewport scaling to the entire phone screen;
For example the embodiment, the width and height of elements 360 * 600px, first element is rendered in the viewport 980px width, and scaling on the entire screen of the phone;
viewport is connected to the middle layer cell phone screen and pages
Why bother then?
Imagine, if there is no intermediate layer directly to a page width for the direct scaling 980px to 320px, then the inside of a DOM node will be redrawn, it is likely to lead to confusion layout;
the role of the viewport is drawn first of all DOM nodes 980px in width on the viewport, and then the entire viewport uniform scale, so it can guarantee the correctness of layout;
About viewport, it involves two concepts:
layout viewport: layout viewport, can be understood as the curtain placement of the page
visual vewport: window viewport, window screen can be understood as
such:
The width of the visual viewport kidney 6Plus is 360px, layout viewport is 980px;
360px screen is a Windows virtual pixels, 980px is the pixel placement of the page;
Recall that elements appear in front of the scaling phenomenon:
According to the physical resolution of kidney 6Plus 1920*1080and 5.5 inches of screen, calculate the ppi = 401-> dpr = 3 - > Virtual resolution 640*360px;
Draw a width of 360px elements, should fill the entire screen of the phone, but due to the viewport -> 360px elements drawn on the layout viewport 980px, and then scaling on the visual viewport 360px -> End you see is what , 360px elements can not fill the entire screen;
Previous One solution is to change the layout viewport, that is <meta name="viewport" content="width=360">, the entire layout viewport is 360px, then the element will fill the entire screen;
These are the worldview, giving some conceptual understanding, not practical operation, the following is the methodology
The actual mobile terminal development, we can focus on layout viewport, know that every mobile device available to us how much screen size, but the mobile device model so much, one can not manually set the width it! ! !
Dynamic setting layout viewport
<meta name="viewport" content="width=device-width">The above setting means so that the device is always equal to the width of the layout viewport, i.e. visual viewport;
[Note] of children's shoes may notice carefully, why not virtual resolution kidney 6Plus 640*360px, can answer specific reference to know almost Q & A
Get visual viewport and layout viewport of api
window.innerWidth：表示窗口的宽度（包含滚动条），即visual vewport的宽度
document.body.clientWidth：表示body元素的宽度（不包括border），即layout viewport的宽度Other initial setting moving end
intial-scale:页面首次显示时，可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放；
no-scalable：是否允许缩放A complete set viewport attribute is:
<meta name="viewport" content="width=device-width,initial-scale=1,no-scalable=no">The full meaning, layout viewport equal to the width of the device, first displayed without scaling the page does not allow the user zooms;
summary
Start speaking px / dp / dpr significance lies ppi / bedding background
After understanding the above knowledge, the physical resolution give you a mobile device, such as a Plus1920 iPhone6 1080 and the size 5.5inches, which can be calculated as ppi 401-> dpr = 3, so that the calculation of the virtual resolution of the phone 640 360px;
In principle, you develop a 640 * 360px elements can fill the entire screen of the phone, but due viewport mechanism, the effect is less than expected
This leads to the concept of viewport, viewport can be divided Visual viewport (window size) and the layout viewport (page placed "curtain"), iPhone6 Plus default value 980px;
By viewport property meta tags may be dynamically set layout viewport, only need to set combat:
<meta name="viewport" content="width=device-width,initial-scale=1,no-scalable=no">You can also
window.innerWidth和document.body.clientWidth（前提是不设置body的宽度）get visual viewport and layout viewport, respectively;
This article is reproduced in: ape 2048➺ https://www.mk2048.com/blog/blog.php?id=hhi0abccj2j