First, why should mobile terminal adaptation?
Design draft general designer of the design according to the size of 375, however, and now the mobile terminal (is the cell phone) era of rapid updating, each brand of phones have different physical resolution, which would result in, each device the logical resolution are not the same, this time 375 of the draft design, if you want to restore it is basically impossible, because if a layout or so, if left to write the dead, the right adaptive, then the right side of each device demonstrated content size to vary, then the mobile terminal adapter is especially important.
As to understand past lives, we start with a few concepts, first on a map.
Screen size 1.1
Screen size is the diagonal length of the screen to measure units of measurement in inches.
Two diagonal length as shown in this screen size is
1.2 pixels
We see on the map called 320x480 resolution, and this so-called lateral resolution saying that white is 320 pixels vertical 480 pixels
1.2.1 What pixels it?
Pixels (Pel, pixel, pictureelement), all of the luminance and chrominance of an image composed of the minimum picture unit. Television image is composed of a constant brightness by different spaced image points, the image forming unit is a pixel point, the smallest unit of an image is composed of pixels. The explanation is the angle of computer technology, the pixel is the smallest unit of hardware and software can control. It implies that out on the display screen of the minimum unit, the picture is not the smallest unit. An image typically contain thousands of pixels, each pixel has its own color information, they are closely together. Since the human eye the illusion, these pixels are combined as a complete image. When modifying a region of the image, it is in fact modify the pixel region. These modifications are good or bad pixels will determine the quality of the final image. The more pixels per unit area, the better the effect of the image. Color television image is composed of thousands of pixels, and each pixel is composed of red, green and blue colors side by side. (Note the size of each pixel is not fixed, he is determined according to the resolution of the equipment, knowledge, back to test)
1.2.2 What is the resolution of it?
Screen resolution refers to the number of pixels in the vertical and horizontal direction, the unit is px. Screen resolution setting to determine how much information is displayed on the computer screen, to measure the horizontal and vertical pixels. In terms of the same size screen, when the screen resolution is low (e.g. 640 x 480), a pixel displayed on a small screen, the individual pixel size is relatively large. High screen resolution (e.g. 1600 x 1200), a pixel displayed on the screen multiple, relatively small size of a single pixel.
After knowing what is called the resolution, some people will wonder, I remember that apple apple apple official website of Resolution 6 is 750x1334 ah, but the Apple design draft resolution is 375x667 ah 6, and the resolution of each device than the actual resolution is much smaller, which involves a number of historical reasons
1.2.3 physical resolution device (device pixels)
We believe that all front-end developers, all witnessed the development process of mobile phone. From the blue screen phone, the color screen phone, the Nokia developed touch-screen phone, and then step by step development of smart phones down our our hands more and more clear, more and more, so we screen more and more rapid development.
From the initial grainy fairly large screen, and then to 720p 1080p, even now that the flagship phone 2k screen, our physical resolution of the original becomes greater. This exposed a problem, if we double the resolution of the phone, our image is not going to be reduced to double, we want to do it out of a draft design on each device, each device to distinguish different ah, in fact, your concern, our many years ago, Joe closer in thought. This is our logical resolution
1.2.4 Resolution Logic (device independent pixel)
As shown below, although the device is physically different resolution, but he is almost nothing but the logical resolution, which would be the Joe closer thanks.
Jobs on the iPhone4 conference first proposed the concept Retina Display (retina screen), and in the retina iPhone4 screen used in the 2x2 pixel when a pixel to use, so make the screen look more refined, but the size of the element but will not change. From then on high resolution devices, a plurality of logical pixel. These devices logical pixel difference, though not great span, but still a little different, so they gave birth to mobile end page requires adaptation to this problem, since the logical pixel is composed of physical pixels come, then they will have a pixel ratio.
1.2.5 device pixel ratio
Device pixel bit device pixel ratio referred dpr, i.e. individual pixels of the pixel and the physical devices ratio. Why should we know the device pixel ratio? Because this pixel ratio will produce a very classic question, Question 1 pixel border.
1px border issues
When we write the css 1px, since it is a logical pixel, resulting in our logical pixel according to the device pixel ratio (dpr) to be mapped to the device it is 2px, or 3px, because the screen size of each device is not the same , has led to each physical pixel size rendered different (you remember the above knowledge, the pixel size of the device is not fixed), so that if in the relatively large size of equipment, 1px rendered look quite coarse ore this is the classic problem of a pixel border.
How to solve
The core idea is that in the web, the browser provides us window.devicePixelRatio to help us get dpr. In css, you can use media queries min-device-pixel-ratio, distinction dpr: According to this than we pixels, calculates that he should have a corresponding size, but a very large exposure to compatibility issues.
Wherein the 0.5px Chrome 1px into a rounded, while firefox / safari side half pixel can be drawn, and as a Chrome will 0.5px less than 0, but not less than 0.55px as Firefox will 1px, Safari is to not less than 0.75px as 1px, further observation of iOS Chrome will draw on the phone side 0.5px, and Android (5.0) native browser does not work. So directly 0.5px different browsers are great differences, and we see different systems of different browsers have different handling of the decimal point px. So if we put the unit is set to include a decimal px wide higher, in fact, less reliable, because different browsers behave differently.
As for the other pixel border to solve a bunch of problems online answers, here I recommend a very easy to use, and no side effects solution.
transform: scale (0.5) Scheme
div {
height:1px;
background:#000;
-webkit-transform: scaleY(0.5);
-webkit-transform-origin:0 0;
overflow: hidden;
} After css media query based on device pixel ratio solution
/* 2倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
.border-bottom::after {
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
/* 3倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
.border-bottom::after {
-webkit-transform: scaleY(0.33);
transform: scaleY(0.33);
}
} So, the perfect solution to the problem of a coarse pixels watching.
Extensions Supplement
CSS latest specification is planning to implement a pixel border by standard property, is achieved by adding a keyword attribute to the hairline border-width attribute, as follows links [1]. The reason is called hairline, just because a pixel border silky hair.
When practice using the program, but also a lot of attention to the latest developments yo.
Second, how to adapt
2.1 viewport
Viewport (the viewport) computer graphics representing the current visible region. In the Web browser terminology, usually the same browser window, but it does not include the browser UI, menu bar, etc. - that refers to a part of the document you are browsing.
How to configure the viewport in the mobile end it? Simply a meta tag can be!
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;"> They are what the meaning of it?
We end in order to move the viewport in good visual effects and experience, then we viewport width must be as close to ideal viewport.
Ideal viewport: In general, the viewport is actually not really exist, it is an ideal device for layout viewport size, if the user does not perform manual scaling can be ideally page display. So-called ideal width is the browser (screen) of the width.
So the above meta settings, is our ideal setting, he sets out our viewport width of the screen width, initial scale of 1, that is, when our initial visual viewport is the ideal viewport!
Which is set to no user-scalable mobile terminal can solve the delay problem click event (expand)
2.2 adaptation method
2.2.1 rem adaptation
rem is a unit of CSS3 relatively new, this unit has attracted wide attention. This unit with em What is the difference? The difference is that when using rem set the font size for the element is still relative size, but just the opposite HTML root element. This unit can be said to set the relative merits of the absolute size and size in one, both can be done only by modifying the root element of all proportion to adjust the font size, and font size layer by layer to avoid complex chain reaction. Currently, in addition to IE8 and earlier, all browsers have support rem. For browsers do not support it, our approach is very simple, is to write a statement of absolute units. These browsers will ignore a rem set the font size.
for example:
//假设我给根元素的大小设置为14px
html{
font-size：14px
}
//p标签如果想要也是14像素
p{
font-size:1rem
}
rem layout, you must mention flexible, flexible solution is a mobile open source after an early end Ali adaptation solutions, citing flexible, we unified use in rem to the page layout.
His principles are simple.
// set 1rem = viewWidth / 10
function setRemUnit () {
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
}
setRemUnit(); rem is the relative font-size html node to do the calculations. Therefore, if the initial page when a font-size is provided to the root element, the next element to be laid out according to rem, so as to ensure the page size changes, the layout may be adaptively.
So we need to give the design draft px converted into the corresponding units can be rem.
Of course, this program is just a transition program, why is the transition program
Since then viewport also compatible with the lower version of the Andrew equipment problems, and vw, vh not been able to achieve all browsers compatible, so flexible program with rem to simulate vmin be implemented in different devices geometric scaling of "excessive" program, the so the program is excessive, because this is to judge him according to this device the size of a page program is based on the screen size to a hundred percent reduction design draft, so people see the size of the effect is the same, but Apple and Apple 6p although 5 see the design draft reduction is the same, but he saw at a suitable distance effect can be the same as you, in essence, a user with a larger screen, want to see more content, rather than a larger word .
so, by scaling to solve this problem is a transition program, destined to be eliminated by the times.
2.2.2 vw, vh layout
vh, vw program shortly window.innerWidth visual viewport width and height of the visual viewport window.innerHeight divided into 100 parts.
vw and vh similar programs and rem is quite troublesome to do unit conversions, and convert px to vw not be able to fully divisible, so there is a certain pixel difference.
But in the engineering of today, webpack parsing css when using postcss-loader has a postcss-px-to-viewport can automatically convert px to the vw
{
loader: 'postcss-loader',
options: {
plugins: ()=>[
require('autoprefixer')({
browsers: ['last 5 versions']
}),
require('postcss-px-to-viewport')({
viewportWidth: 375, //视口宽度（数字)
viewportHeight: 1334, //视口高度（数字）
unitPrecision: 3, //设置的保留小数位数（数字）
viewportUnit: 'vw', //设置要转换的单位（字符串）
selectorBlackList: ['.ignore', '.hairlines'], //不需要进行转换的类名（数组）
minPixelValue: 1, //设置要替换的最小像素值（数字）
mediaQuery: false //允许在媒体查询中转换px（true/false）
})
]
} 2.2.3 px mainly, vx and vxxx (vw / vh / vmax / vmin), supplemented with a number of flex (recommended)
Recommend the use of such a program, because we going to consider the needs of users, users reason to buy a large-screen phone, not to see the bigger words, but to see more content, so directly px It is the most sensible solution, use vw, rem and other layout means understandable, but, flex such elastic layouts popular today, if if it is with this traditional thinking clearly think about the problem for two reasons (px think is the most well, there may be big brother, you can vw, or rem write sophisticated layout, can not say).
- To be lazy, not willing to do for each phone adapter
- I do not want to learn a new layout, so the layout and other advanced flex pass you by
The mobile terminal adapted to process 2.3
1 is provided in the head width = device-width of the viewport '
2. Using px in the css
3. The flex layout appropriate scenarios, or with adaptive vw
4. (pc <-> phone <-> tablet) when cross-device type of media queries
5. If the interaction across device types are too different circumstances, be considered separately from the project development
to sum up:
A set of standard rules are generally a lot of hybrid development has adapted, but similar.
