[Study Notes] viewport definition, elastic layout, responsive layout, learning notes viewport

[Study Notes] viewport definition, elastic layout, responsive layout, learning notes viewport

I. Mobile Terminal width settings
Viewport View window, <meta name = "viewport" content = "width = device-width, initial-scale = 1, user-scalable = no">, window width = device width, the default scaling value is 1. User scaling is not allowed.

Ii. flexbox, elastic box model:
1. Add "display:-webkit-flex" to the element css to convert it into an elastic box model, and then add "flex: 1/2/3" to the CSS of multiple child elements, in this way, the child element can be allocated to fill up the parent element according to the defined proportion of 1/2/3.
2. Hybrid partitioning:

Sub-elements can be fixed width or flex values, which can be used flexibly and are common in

The image uses a fixed width to prevent scaling distortion, and the text on the right uses an elastic layout to set flex: 1.
3. Center horizontally and vertically at an indefinite width
CSS3 solution:. myoff-wrapper {
Position: absolute;
Top: 50%;
Left: 50%;
Z-index: 3;
-Webkit-transform: translate (-50%,-50% );
Border-radius: 6px;
Background: # fff;
}
Better flexbox solution: Set the parent element to center the child element horizontally
. Parent {
Display:-webkit-flex;
Justify-content: center; // The child element is horizontally centered.
Align-items: center; // The child element is vertically centered.
}
More applications:

3. Responsive layout: Excellent user experience with different resolutions of different devices

The responsive layout method relies on media queries:

Media query types: screen, print, handheld, and all)
Common media query parameters: width, height, device-width, device-height, and orientation)

Em: the unit is relative to the font-size of the parent element;
Rem: the unit is relative to the font-size of html.