Mobile Page Development process

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 flexible Box layout

Mobile Page Development process