Mobile Development and responsive websites

　　Today say something about the development of mobile Internet and responsive websites.

"Viewport basic knowledge"

1, 1, width=device-width: Set viewport viewport width equal to device width

2, initial-scale=1: page Default scaling ratio is 1 (Web page does not scale on the handheld device)

3, minimum-scale=1: Web page Minimum scaling ratio is 1

4, maximum-scale=1: page Maximum zoom ratio is 1

5, User-scalable=no: Prohibit users to manually zoom the page. Failure of equipment above IOS10

"Some of the statements used in mobile development and responsive web sites (this part is not too important to know)"

<meta name= "viewport" content= "width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1, User-scalable=no "/> ( Note that this sentence is required at the time of development )

There are some similar meta tags in the properties, I do not have one by one cases, interested in can check their own.

"How to implement responsive layout"

1, media query the way medium

2. Flexible layout

"Three ways to use media queries"

1. Use directly in CSS

　@media type (Changxiang all/screen) and (condition 1) and (condition 2) {
CSS Selector {
CSS properties: property values;
}
}

　　2. Use Link link Css,media property to set media query mode

　　<link rel= "stylesheet" href= "css/02-responsive layout. css" Media= "All and (max-width:800px)"/>

3, using import imports, directly after the URL using the Space interval media query rules

　　@import URL ("css/02--responsive layout. css") All and (max-width:800px);

"Flxe Flexible Layout"

　　1, first of all, we first understand the two basic concepts

(1), container: A parent element that needs to add a resilient layout

(2), Project: Each sub-element in an elastic layout is called a project

　　2, the use of flexible layout

(1), add Display:flex to the container, or display:inline-flex; To enable the container content to be displayed in a flexible layout instead of following the normal document flow display

(2), after the container adds the elastic layout, only the container content uses the elastic layout, and the container itself locates in the document flow still follows the regular document flow

(3), Display:flex; When a container is added to a flexible layout, it is displayed as a block-level element;

Display:inline-flex: When a container is added as a flex layout, it is displayed as a row-level element

(4), when set to flex layout, the float, clear, and vertical-align properties of the child elements are invalidated, but the position property remains in effect.

　3, the relevant properties of the container (some key content)

　　(1), the Flex-direction property determines the direction of the spindle (that is, the direction of the project).

Row: Default value, spindle is horizontal, starting point on left side

Row-reverse, spindle horizontal direction, starting point at right end.

Column: The spindle is in the vertical direction, starting at the top edge.

Column-reverse: The spindle is in the vertical direction, starting at the bottom edge.

(2), flex-wrap definition if an axis line does not fit, how to wrap.

NoWrap (default): No line break, each item is squeezed when the container is not wide enough

Wrap: Wrap, and the first line is at the top of the container

Wrap-reverse: NewLine, and the first line is at the bottom of the container

(3), Flex-flow: is a shorthand for the Flex-direction property and Flex-wrap property, the default is row nowrap

(4), the Justify-content attribute defines how the item is aligned on the spindle.

Note: This property is closely related to the main axis direction, the direction of the shaft is: row-beginning at left, Row-reverse beginning at right, column beginning on; Column-reverse beginning in the bottom.

Flex-start (default): Project at start of spindle

Flex-end: Project at the end of spindle

Center: Center

Space-between: Justified, the interval between items is equal. There is no interval between the opening and the final item and the container edge

Space-around: The intervals on each side of the item are equal. Therefore, the interval between items is one times larger than the interval between items and borders. (The initial and final items are spaced from the edge of the container)

(5), the Align-items property defines how the item is arranged on the intersection axis.

Flex-start: The start alignment of the intersection axis.

Flex-end: The end alignment of the intersection axis.

Center: The midpoint alignment of the intersection axis.

Baseline: The baseline alignment of the first line of text for the item. (The font size affects the baseline of each line, subject to the line height of the text)

Stretch (default): If the item is not set to height or auto, it fills the height of the entire container.

(6), the Align-content attribute defines the alignment of multiple axes. If the item has only one axis, this property does not work.

        Note: You can use align-content instead of Align-items when items are swapped for multiple rows.      

Flex-start: Aligns with the starting point of the intersection axis.
Flex-end: Aligns with the end of the intersection axis.
Center: Aligns with the midpoint of the intersection axis.
Space-between: aligned with the intersection axis and evenly spaced between the axes.
Space-around: The intervals between each axis are equal. Therefore, the spacing between the axes is one times larger than the interval between the axes and the border.
Stretch (default): Axis fills the entire cross axis

4, for the properties on the project　　
(1), the Order property defines the order in which the items are arranged. The smaller the number, the higher the alignment, and the default is 0. (Common)
(2), the Flex-grow property defines the magnification of the item. The default is 0, that is, if there is space left, do not zoom in.
(3), the Flex-shrink attribute defines the scaling of the project, which defaults to 1, that is, if there is not enough space, the project shrinks.
(4), Flex-basis: Define the main spindle space occupied by the project, if the spindle is horizontal, setting this property is equivalent to setting the width of the item, the original width is invalid.
(5), Flex properties are shorthand for Flex-grow, Flex-shrink, and flex-basis, and the default value is 0 1 auto. The latter two properties are optional.
This property has two shortcut settings:auto= (1 1 Auto)/none= (0 0 Auto)
(6), the Align-self attribute defines how the individual item is arranged on the cross axis, can overwrite the Align-items property on the container, and the property value is the same as Align-items
The default value is auto, which inherits the properties of the parent container's align-items. (Common)

　　

Mobile Development and responsive websites