Mobile web development streaming layout

1.0 Mobile Basic

1.1 Browser status

Common browsers on PC: 360 browser, Google browser, Firefox browser, QQ browser, Baidu browser, Sogou browser, IE browser.

Common mobile browsers: UC browser, QQ browser, Oppon browser, Baidu mobile browser, 360 secure browser, Google Chrome, Sogou mobile browser, Cheetah browser, and other miscellaneous browsers.

Domestic UC and QQ, Baidu and other mobile browsers are based on the modified kernel of Webkit. There is no independent research and development kernel in China, just like the domestic mobile phone operating system is developed based on Android modification.

Summary: Compatible with mainstream mobile browsers, just handle the Webkit kernel browser.

1.2 Status of mobile phone screen

The screen size of mobile devices is very large, and fragmentation is serious.
Android devices have multiple resolutions: 480x800, 480x854, 540x960, 720x1280, 1080x1920, etc., as well as the legendary 2K and 4k screens.
In recent years, the fragmentation of the iPhone has also intensified. The main resolutions of its devices are: 640x960, 640x1136, 750x1334, 1242x2208, etc.
As a developer, you don't need to pay attention to these resolutions, because our common size unit is px.

1.3 Common mobile terminal screen size

1.4 Mobile terminal debugging method

Simulated mobile debugging of Chrome DevTools (Google Chrome)
Build a local web server, mobile phone and server in a local area network, access the server through the mobile phone
Using an external server, direct IP or domain name access

2.0 Viewport

The viewport is the area of the screen where the browser displays the content of the page. Viewports can be divided into layout viewports, visual viewports, and ideal viewports

2.1 layout viewport

Generally, browsers of mobile devices have a layout viewport set by default, which is used to solve the problem that the early PC-side pages are displayed on mobile phones.

iOS and Android basically set this viewport resolution to 980px, so most of the web pages on the PC can be rendered on the mobile phone, but the elements look very small. Generally, you can manually zoom the web page by default.

2.2 Visual viewport

Literally, it is the area of the website that the user is seeing. Note: It is the area of the website.

We can use zoom to manipulate the visual viewport, but it will not affect the layout viewport, and the layout viewport will still maintain the original width.

2.3 Ideal viewport

In order to make the website have the best browsing and reading width on the mobile terminal

The ideal viewport is the most ideal viewport size for the device

Need to manually add meta viewport tags to notify browser operations

The main purpose of the meta viewport label: the width of the layout viewport should be the same as the width of the ideal viewport. A simple understanding is how wide the device is, and how wide the viewport we lay out

Summary: Our development will eventually use the ideal viewport, and the ideal viewport is to modify the width of the layout viewport to the visual viewport

2.4meta tag

The most standard viewport settings

Keep the viewport width and device consistent
The default zoom ratio of the viewport is 1.0
Do not allow users to zoom
Maximum allowable zoom ratio 1.0
Minimum allowable zoom ratio 1.0

3.0 double graph

3.1 Physical pixel & physical pixel ratio

Physical pixels refer to the smallest particles displayed on the screen and are physically present. This is set by the manufacturer at the factory, for example, Apple 6 is 750 * 1334

When we developed, 1px is not necessarily equal to 1 physical pixel

The number of physical pixels that can be displayed in one px is called physical pixel ratio or screen pixel ratio

If you put a 100 * 100 picture into the phone, it will scale us according to the physical pixel ratio

lRetina (retina screen) is a display technology that can compress more physical pixels into a screen to achieve higher resolution and improve the delicateness of the screen display.

For a 50px * 50px picture, open it on the phone or Retina screen, and it will be magnified according to the physical pixel ratio just now, which will cause the picture to be blurred

In the standard viewport setting, use the double image to improve the image quality and solve the blur problem in high-definition equipment

Usually use double image, because iPhone 6 affects the background image, pay attention to zooming

3.2 Background scaling

The background-size attribute specifies the size of the background image

background-size: background image width background image height;

Unit: Length | Percentage | cover | contain;

cover expands the background image to be large enough so that the background image completely covers the background area.

contain expands the image to the maximum size so that its width and height fully fit the content area

4.0 Mobile development options and technical solutions

4.1 Mobile mainstream solution

1. Make mobile page separately (mainstream)

Normally, add m (mobile) in front of the domain name to open the mobile terminal. By judging the device, if the mobile device is turned on, jump to the mobile terminal page.

In other words, the PC and mobile terminals are two sets of websites, and the pc terminal is in the style of broken PC. The mobile terminal is writing a set of websites that are specifically adapted to the mobile terminal.

Jingdong pc end:

JD mobile:

2. Responsive page compatible with mobile terminal (second)

Responsive website: PC and mobile share a set of website, but the style will automatically adapt to different screens

4.2 Mobile terminal technical solutions

1. Mobile browser compatibility issues

The mobile browser is basically based on the webkit kernel, so we will consider webkit compatibility issues.

We can safely use H5 tags and CSS3 styles.

At the same time, we only need to consider adding webkit to the private prefix of our browser.

2. Mobile public style

It is recommended to use normalize.css / for mobile CSS initialization

Normalize.css: protects valuable default values

Normalize.css: fixed browser bug

Normalize.css: is modular

Normalize.css: has detailed documentation

Official website address: http://necolas.github.io/normalize.css/

4.3 The mobile terminal uses a lot of CSS3 box model box-sizin

Traditional mode width calculation: the width of the box = width set in CSS + border + padding

CSS3 box model: The width of the box = the width set in CSS, which contains border and padding

In other words, the box model in our CSS3, padding and border will not support the box

/ * CSS3 box model * / 
Box-Sizing: border-Box; 
/ * traditional box model * / 
Box-Sizing: Content-Box;

The mobile terminal can be full CSS3 box model

If the PC side needs to be fully compatible, we use the traditional mode, if we do not consider compatibility, we choose the CSS3 box model

4.4 Special styles for mobile


    / * CSS3 box model * / 
    box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
   / * Click to highlight we need to clear the clear setting to transparent to complete the transparency * / 
   -webkit-tap-highlight-color : transparent; 
   / * On the default appearance of the mobile browser, add this property on iOS to customize the style of the button and input box * / 
   -webkit-appearance: none; 
   / * Disable the pop-up menu when long pressing the page * / 
   img, a {-webkit-touch- callout: none;}

5.0 Common mobile layout

Mobile made separately

Flow layout (percentage layout)
flex flexible layout (highly recommended)
less + rem + media query layout
Mixed layout

Responsive

Media inquiries
bootstarp

Flow layout:

Streaming layout is a percentage layout, also known as non-fixed pixel layout.

The width of the box is set as a percentage to expand and contract according to the width of the screen, not limited by fixed pixels, and the content is filled to both sides.

Streaming layout is a relatively common layout used in mobile web development.

Mobile web development-flex layout

1.0 Comparison of traditional layout and flex layout

1.1 Traditional layout

Good compatibility
Cumbersome layout
Limitations, can no longer be a good layout on the mobile side

1.2 flex layout

Easy to operate, extremely simple layout, mobile terminal is widely used
PC browser support is poor
IE11 or lower does not support flex or only partial support

1.3 Suggestions

If it is a PC-side page layout, still use the traditional way
If it is a mobile terminal or a PC that does not consider compatibility, use flex

2.0 flex layout principle

Flex is the abbreviation of flexible box, which means "flexible layout". It is used to provide maximum flexibility for the box model. Any container can be designated as flex layout.
When we set the flex layout for the parent box, the float, clear, and vertical-align attributes of the child elements will be invalid.
Flex layout is also called telescopic layout, flexible layout, telescopic box layout, flexible box layout
Elements that use the Flex layout are called Flex containers (flex

container), referred to as "container". All its child elements automatically become members of the container, called the flex item (flex item), referred to as "item".

Summary : It is to add the flex attribute to the parent box to control the position and arrangement of the child box

3.0 Common attributes of parent

flex-direction: set the direction of the main axis
justify-content: Set the arrangement of child elements on the main axis
flex-wrap: Set whether the child elements wrap
align-content: Set the arrangement of child elements on the side axis (multiple lines)
align-items: Set the arrangement of child elements on the side axis (single line)
flex-flow: compound attribute, equivalent to setting flex-direction and flex-wrap at the same time

3.1 flex-direction sets the direction of the main axis

In the flex layout, it is divided into two directions of the main axis and the side axis. The same names are: row and column, x axis and y axis
The default principal axis direction is the x axis direction, horizontal to the right
The default side axis direction is the y axis direction, horizontally downward

Note: The main axis and the side axis will change, depending on who sets the flex-direction as the main axis, the rest is the side axis. And our child elements are arranged along the main axis

3.2 justify-content sets the arrangement of child elements on the main axis

3.3 flex-wrap sets whether to wrap

By default, items are arranged on a line (also called "axis"). The flex-wrap attribute is defined. By default, there is no line break in the flex layout.
nowrap does not wrap
wrap

3.4 align-items Set the arrangement of child elements on the side axis (single line)

This attribute is used to control the arrangement of sub items on the side axis (the default is the y axis) when the sub item is a single item (single line)
flex-start starts from the head
flex-end starts at the end
center display
stretch

3.5 align-content Set the arrangement of child elements on the side axis (multiple lines)

Set the arrangement of the sub-items on the side axis and can only be used when the sub-items have line breaks (multi-line), which has no effect under a single line.

3.6 The difference between align-content and align-items

align-items is suitable for single line, only up, down, center and stretch
align-content is suitable for the case of line breaks (multiple lines) (invalid in the case of a single line), you can set the top alignment, bottom alignment, centering, stretching, and even distribution of remaining space and other attribute values.
The summary is to find align-items in one line and align-content in multiple lines

3.7 The flex-flow attribute is a composite attribute of flex-direction and flex-wrap attributes

flex-flow:row wrap;

4.0 Common properties of flex layout items

The number of shares of the flex sub-item
align-self controls how the children themselves are arranged on the side axis
The order attribute defines the order of the children (the order before and after)

4.1 flex properties

The flex attribute defines the remaining space allocated by the sub-item, and flex is used to indicate how many copies are occupied.

{.Item 
    Flex: <Number>; / * Default 0 * / 
}

4.2 align-self controls how children are arranged on the side axis

The align-self attribute allows a single item to have a different alignment than other items, and can override the align-items attribute.

The default value is auto, which means that the align-items attribute of the parent element is inherited. If there is no parent element, it is equivalent to stretch.


span: Child-Nth (2) { 
      / * set their arrangement on the shaft side * / 
      align = left Self-: Flex-End; 
}

4.3 order attribute defines the order of items

The smaller the value, the higher the arrangement, the default is 0.

Note: Not the same as z-index.


.item {
    order: <number>;
}

5.0 Ctrip homepage case making

Ctrip network link: http://m.ctrip.com

1. Technical selection

Plan: We adopt a plan for making mobile pages separately

Technology: layout adopts flex layout

2. Build related folders

3. Set the viewport label and introduce the initialization style


<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/index.css">

4. Commonly used initialization styles


body {
  max-width: 540px;
  min-width: 320px;
  margin: 0 auto;
  font: normal 14px/1.5 Tahoma,"Lucida Grande",Verdana,"Microsoft Yahei",STXihei,hei;
 color: #000;
 background: #f2f2f2;
 overflow-x: hidden;
 -webkit-tap-highlight-color: transparent;
}

5. Module name division

Mobile web development layout