Mobile-page Layout

Mobile-page layoutfirst, mobile app classification1. Native app native app mobile app

Mobile apps developed using native languages, the Android system uses the Java,ios system is object-c

2, Hybrid app Hybrid app mobile app

Mixed use of native programs and HTML5 pages developed by mobile apps

3. Web App Web-based app mobile app

Full use of HTML5 page plus front-end JS framework development of mobile phone applications

second, viewport viewport

The viewport is the area on the mobile device used to display the page, generally larger than the mobile device viewable area, the width may be 980px or 1024px, the purpose is to display the entire PC-side design of the page, the result is the mobile side will appear horizontal scroll bar, in order to avoid this situation, The mobile side zooms the viewport to the size of the mobile window. This will make the page not easy to watch, you can use the META tag, name= "viewport" to set the viewport size, the size of the viewport is set to the same size as the mobile device visible area.

The Setup method is as follows:<meta name= "viewport" content= "width=device-width,user-scale=no,initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0 ">Third, PC and mobile page adaptation method

The device has a variety of different resolutions, the page adaptation scheme has the following several:

1. Pang with: Fluid layout + responsive layout2, mobile-side adaptation:

A, fluid layout + small response

B, REM-based layouts

C, elastic-fit model

A, fluid layout

is to use percentages to set the width of the element, the height of the element is fixed by the actual height, the edge of the element in the fluid layout (border) cannot be used as a percentage, and the Calculation Function calc () in the style can be used to set the width. Or use the Box-sizing property to set the box to the edge to calculate the box size.

1, Calc () can be calculated to add dimensions to the element. For example: Width:calc (25%-4px);2, Box-sizing

A, content-box the default box size calculation method.

b, the size of the Border-box box is calculated as starting from the border, the size of the box, the border and the inner fill in the box size

Responsive Layout

Responsive layout is the use of media queries, by querying the width of the browser, different width of different style blocks, each style block corresponding to the layout of the width, so as to achieve a responsive layout, responsive layout of the page can be adapted to a variety of terminal screens (PC, tablet, mobile).

The pseudo-code for the corresponding layout is as follows:

B, REM-based layouts1, EM units are reference to the text size of the element itself to set the size

2, REM refers to the text size of the reference root node. The root node refers to the HTML tag, the size of the HTML tag, the other elements related to the size of REM, so that all elements have a unified reference standard, change the size of the HTML text, will change all the elements with REM set size.

Cssrem Installation: Cssrem plug-in can dynamically convert PX dimensions to REM size

Download this project, for example: Git clone https://github.com/flashlizi/cssrem into Packages directory: Sublime text-preferences-"Browse Packages Copy the downloaded Cssrem directory into the packages directory just now. Restart Sublime Text.

Configuration parameter profile: Sublime text-"preferences-" package settings-"Cssrem has a px_to_rem (meaning px to REM unit ratio, default is 40). Max_rem_fraction_length (px to rem the largest length of the number of parts. Default is 6). Availiable_file_types enable the file type for this plug-in. The default is: [". css", ". Less", "sass", ". html"].

C, Flexible box model layout1. Container attribute Display:flex declaration using elastic Box layout (all are set on parent element)

Use Display:flex to become inline block elements relative to the handle element, and no gaps are created between them.

　　Determine the direction of the child element arrangement: Flex-direction:row | Row-reverse|column|column-reserve

A, flex-direction:row 　　 default child elements horizontally left-aligned

B, flex-direction:row-reverse Sub-elements on the right reverse order, similar to the right floating

C, flex-direction: column; Vertical row

D, flex-direction: column-reverse; Reverse Vertical row

　　Whether the element wraps when it exceeds the parent container size: flex-wrap:nowrap|wrap|wrap-reverse

　　A, flex-wrap:nowrap; when the child element width exceeds the parent width, the default does not break the line

b, flex-wrap:wrap; When the child element width exceeds the parent width, the line breaks

c, Flex-wrap:wrap-reserve; When the child element width exceeds the parent width, the reverse line wraps

Set flex-direction at the same time | Flex-wrap: Flex-flow:flex-direction | flex-wrap flex-flow:row wrap;

　　After the dimension of the child element is determined, use this property to set the distribution on the flex-direction definition direction: Justify-content:flex-start | Flex-end | Center | Space-between | Space-around

　　A,justify-content:flex-start the whole child element on the left

　　B,justify-content:flex-end integral sub-elements on the right

C,justify-content:center the whole sub-element center

D,Justify-content:space-between the first child element on the left shelf, the last child element on the right shelf, the middle sub-element evenly divided the distance

E,justify-content:space-around the first child element on the left and the last child element to the right of the spacing is halfway between the middle child element spacing, the middle element divides the spacing.

　　After the dimension of the child element is determined, use this property to set the distribution of the vertical direction on the flex-direction defined direction: Align-items:flex-start | Flex-end | Center | Baseline | Stretch

　　A,Align-items:flex-start the overall vertical alignment

B,align-items:flex-end The overall vertical alignment

C,Align-items:center integral sub-elements are centered vertically (can also be achieved using margin or padding or positioning)

D, thebottom of the text in the Align-items:baseline child elements, if the text size is different, it will cause the bottom of the child is not aligned

E,align-items:stretch If the child element does not set the height, the height is stretched to the same height as the parent element (minus its own margin)

　　To set the alignment of multiline child elements in the row direction: Align-content:flex-start | Flex-end | Center | Space-between | Space-between | Space-around | Stretch

A,Align-content:flex-start Multi-line of the overall alignment

B,align-content:flex-end multi-line overall bottom arrangement

C,align-content:center multi-line overall center arrangement

D,Align-content:space-between the first row of sub-elements on the upper shelf, the last line of sub-elements down shelf, the middle row sub-elements equal vertical spacing

2. Item Properties

　　Also set Flex-grow and Flex-shrink as well as flex-basis such as: Flex:none | < ' Flex-grow ' >< ' flex-shrink ' > '? | | < ' flex-basis ' >

　　Represents the proportion of the space that is assigned to the quality of the different child elements when the parent element is extra space. Flex-grow:number

　　The size of each child element is scaled down when there is not enough space for the parent element. Flex-shrink:number

　　Used to determine the initial spindle size of an elastic entry. Flex-basis:length|precentage|auto|content

　　Override the alignment specified by the parent element. Align-self:auto | Flex-start | Flex-end |center|baseline|stretch

　　Change the order in which entries appear in the container. Order:integer

Mobile-page Layout