Mobile web development design draft and workflow

Here is a concise front-end knowledge system waiting for you to check, have a look, there will be a surprise oh, if you feel good, begged star ha ~

Thank you

The adaptation of mobile terminal has always been a difficult problem for me. Today I took a rest and looked up a lot of information to sort it out. In this paper, many practices are directly borrowed from the online articles, mainly from netease and Taobao font size thinking front-end design draft and workflow and mobile end page adaptive solution – REM layout advanced version (attached source code example), thanks to god.

Mobile device resolution

1. Pt is logical resolution, simple understanding is related to the size of the screen, is a unit of length and vision.
2. Px is the physical resolution, simply known as pixels, regardless of the size of the screen.

Summary: The relationship between PT and PX is that a unit of PT contains several px. The more px, the clearer it will be. But the 6Plus won’t look any clearer than the 6 because the human retina can only see up to two pixels in a pt unit.

Mobile web development design draft and workflow

One of the difficulties of mobile Web development is adapting to mobile devices of all resolutions — rem is the obvious thing to use. However, in practice, how to determine the FONT size on HTML is a difficult problem. Generally, there are the following ways:

Use CSS3 media to query information

html{font-size:10px} @media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}} @media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}} @media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}} @media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}} @media screen and (min-width:720px) and (max-width:749px){HTML {font-size:22.5px}} @media screen and (min-width:750px) And (max-width:799px){HTML {font-size:23.5px}} @media screen and (min-width:800px){HTML {font-size:25px}}Copy the code

Using CSS3 media query is obviously inadequate:

1. A large number of media queries need to be written to accommodate different devices
2. The scope of media inquiries may not be appropriate
3. Font size in each media query is difficult to define
4. Each time to set rem elements need to be calculated according to a certain resolution OF HTML font size, the workload is large.

Summary: CSS3 media queries are theoretically possible, but not flexible to operate

Simple problems are easy to solve

Some Web apps are simpler, so just remember one development principle: text streaming, control elasticity, and image scaling. To describe:

Netease’s practices

The page complexity of netease is high. With the increase of resolution, the effect of netease pages will also change significantly. To achieve this effect, REM is required as the unit, and the FONT size of HTML is calculated by JS. Workflow of netease Mobile Web can be summarized as follows:

The first step is to set the viewport of the viewport

<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

The second step is to determine the size of body and page elements based on iphone6/6s design draft

The design draft of netease web page is based on iPhone 6/6s, with a physical resolution (design width) of 750px and a logical resolution (deviceWidth) of 375. For easy calculation, first divide the vertical horizontal resolution of the design by 100 to get the width of the body element: 750/100 = 7.5REM Similarly, the size of the elements on the page can be obtained by dividing the size marked in the design drawing by 100.

The third step is to calculate the fontSize of the HTML to fit each screen size

    document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
Copy the code

Step 4 details adjustment

When deviceWidth is greater than the horizontal resolution of the design, the FONT size of the HTML is always equal to the horizontal resolution /body element width.

The reason for doing this is that when deviceWidth is greater than 640, the physical resolution is greater than 1280 and it’s time to go to the PC website. Just make a few adjustments to step 3.

    var deviceWidth = document.documentElement.clientWidth;
    if(deviceWidth > 640) deviceWidth = 640;
    document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';
Copy the code

Additional media queries may be required

There are some structures on the web that don’t need to be adjusted as the screen gets bigger, such as the bottom navigation bar, where media queries can be used.

Taobao’s approach

Knowledge preparation, understanding viewPort

We usually set the viewPort with the following code:

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

The width of the entire page displayed on the device is equal to the device’s logical pixel size (device-width). Device-width = device physical resolution /(devicePixelRatio * scale)

DevicePixelRatio is called devicePixelRatio. The devicePixelRatio of each device is known and unchanged. Currently, it is generally 2 for high-definition screens, but there are higher ratios, such as 2.5 and 3. The premise of the layout of Taobao touch screen version is that the scale of viewport is dynamically set according to devicePixelRatio.

• When devicePixelRatio is 2, scale is 0.5
• When devicePixelRatio is 3, scale is 0.3333

The purpose of this is to ensure that the page size is consistent with the design draft, for example, if the horizontal physical resolution is 750, the actual page device-width is also 750.

The next question to solve is: how to calculate the dimensions of an element, such as an element 150px wide in the design, in REM? This value is equal to the size of the design draft/the font size of the HTML corresponding to the design draft. In the case of Taobao, the design is 750, so the FONT size of the HTML is 75. If an element is 150px wide, it translates to 150/75 = 2REM.

The first step is dynamically setting the scale of the viewport

    var scale = 1 / devicePixelRatio;
    document.querySelector('meta[name="viewport"]').setAttribute('content'.'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
Copy the code

The second step is to dynamically calculate the FONT size of the HTML

    document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
Copy the code

Because the first step has been based on devicePixelRatio dynamic setting scale, the device – width is equal to the lateral physical resolution of the page (the document. The documentElement. ClientWidth), is the design draft of the transverse resolution of physics. Taobao’s approach is that the design is 750, so the HTML font size is 75.

The third step is to determine the dimensions of each element in the layout

For layout, the CSS size of each element = the marked size of the design document/horizontal resolution of the design document /10 = the marked size of the design document/THE FONT size of the HTML

Step 4 details adjustment

1. Font size may require additional media queries and, like netease, font size does not use REM.
2. Like netease, Taobao also set a critical point, when the device is vertical horizontal physical resolution is greater than 1080, the HTML font size will not change, the reason is the same, the resolution is enough to access the computer version of the page.

Compare with the practice of netease

Thing in common:

1. It can be adapted to all mobile devices. For pad, netease and Taobao, the page will be redirected to PC, and the page that does not use touch screen version needs to set the HTML font size dynamically
2. In layout, the size of each element is calculated according to the size of the design draft annotation. Because the FONT size of HTML is dynamically adjusted, the page layout can be presented with equal proportions under different resolutions
3. Font size does not require REM for container elements, requiring additional media queries for font size
4. Can be applied to different sizes of the design draft, as long as the above summarized method to use it

The difference between

1. Taobao also needs to dynamically set the scale of viewport, while netease does not
2. In netease’s case, REM values are easy to calculate, while Taobao’s case may require the use of CSS processors from Less and SASS

The hd layout of Ali team

Hd program source code

'use strict'; /** * @param {Boolean} [normal = false] - Enable page compression by default; * @param {Number} [baseFontSize = 100] - baseFontSize, default 100px; * @param {Number} [fontscale = 1] - Some businesses want to enlarge a certain percentage of font; */ const win = window; export default win.flex = (normal, baseFontSize, fontscale) => { const _baseFontSize = baseFontSize || 100; const _fontscale = fontscale || 1; const doc = win.document; const ua = navigator.userAgent; const matches = ua.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i); const UCversion = ua.match(/U3\/((\d+|\.) {5,})/i); const isUCHd = UCversion && parseInt(UCversion[1].split('.').join(''), 10) >= 80; const isIos = navigator.appVersion.match(/(iphone|ipad|ipod)/gi); let dpr = win.devicePixelRatio || 1; if (! isIos && ! (matches && matches[1] > 534) && ! IsUCHd) {// if it is not iOS, not Android4.3 or above, not UC kernel, it will not execute hd, DPR set to 1; dpr = 1; } const scale = normal ? 1 : 1 / dpr; let metaEl = doc.querySelector('meta[name="viewport"]'); if (! metaEl) { metaEl = doc.createElement('meta'); metaEl.setAttribute('name', 'viewport'); doc.head.appendChild(metaEl); } metaEl.setAttribute('content', `width=device-width,user-scalable=no,initial-scale=${scale},maximum-scale=${scale},minimum-scale=${scale}`); doc.documentElement.style.fontSize = normal ? '50px' : `${_baseFontSize / 2 * dpr * _fontscale}px`; };Copy the code

The principle of

The principle with afore-mentioned treasure is consistent. Dynamic set HTML font size, and at the same time adjust page zoom value, according to equipment DPR device at this time – width is equal to the lateral physical resolution of the page (the document. The documentElement. ClientWidth), This is the horizontal physical resolution of the design.

advantage

1. Simple reference, simple layout
2. Automatically set the most appropriate HD zoom based on the DPR of the device screen.
3. Ensure the consistency of visual experience under different devices. (The old idea was that the bigger the screen, the bigger the elements; The bigger the screen, the more you see.)
4. Effectively solve the real 1px problem on mobile (where 1px is the physical pixel on the device screen)

use

This solution also defaults to 1rem = 100px. During layout, the size of the physical resolution can be obtained according to the size of the design draft /100

Matters needing attention

1. If the width of the element is more than half the width of the rendering (rendering width is 640 or 750), use percentage width, or flex layout. Avoid issues like the horizontal scroll bar on the iphone5, which is fine on the iphone6
2. The default DPR is 2,1 rem = 100px. If the design is iPhone 6 sp (DPR = 3), the code will be the lastflex(false, 100, 1)Modified intoFlex (false, 66.66667, 1)

How to collaborate with designers

1. In the visual design stage, the designer made the design draft with a width of 750px (iPhone 6), and all design elements except the picture were made by vector path. After the final design, annotate the 750px design draft and output the annotation map. At the same time, zoom in 1.5 times to create a 1125px design and cut the image into a 1125px draft.
2. Output two deliverables to the development engineer: one is the @3x slice resource used by the program, and the other is a 750px design annotation. The reason to cut in the chart of @3x, this is because there are many ultra hd screens like the magic blue note on the market now, devicePixelRatio has reached 3, this cut chart guarantees clear display in all devices.
3. Development engineers get 750px annotation map and @3x slice map resources to complete the interface development of iPhone6 (375pt), and need to use the adaptation method mentioned above.
4. In the adaptation debugging phase, debug the interface effects of iPhone 6 Plus (414PT) and iPhone 5S and below (320pt) respectively upward and downward based on the interface effects of iPhone 6. Thus complete the large, medium and small screen adaptation.